单件商品金额计算和单选全选功能
new Vue({
el: '#app',
data: {
totalMoney: 0,
productList: []
},
filters: {
formatMoney: function (value) {
return "¥ " + value.toFixed(2);
},
},
mounted: function() {
this.$nextTick(function(){
this.cartView();
});
},
methods: {
cartView: function() {
let _this = this;
this.$http.get("data/cartData.json", {"id":123}).then(res=>{
this.productList = res.body.result.list;
this.totalMoney = res.body.result.totalMoney;
});
}
}
});
Vue.filter("money", function(value,type) {
return "¥ "+value.toFixed(2) + type;
})
changeMoney: function(product, way){
if(way>0){
product.productQuentity++;
}else{
product.productQuentity--;
if(product.productQuentity<1){
product.productQuentity = 1;
}
}
}
selectedProduct: function (item) {
if(typeof item.checked == 'undefined'){
Vue.set(item, "checked", true);
}else {
item.checked = !item.checked;
}
}
image.png
地址列表
image.png
image.png
image.png
image.png
new Vue({
el: '.container',
data: {
addressList: []
},
mounted: function() {
this.$nextTick(function(){
});
},
methods: {
getAddressList: function() {
var _this = this;
this.$http.get("data/address.json").then(function (response){
var res = response.data;
if(res.status == "0"){
_this.addressList = res.result;
}
});
}
}
});
image.png
image.png
v-model v-text v-show v-if v-bind v-for v-on