（28）打鸡儿教你Vue.js

单件商品金额计算和单选全选功能

代码语言：javascript复制

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;
})

代码语言：javascript复制

changeMoney: function(product, way){
if(way>0){
 product.productQuentity  ;
 }else{
 product.productQuentity--;
 if(product.productQuentity<1){
  product.productQuentity = 1;
 }
 }
}

代码语言：javascript复制

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

代码语言：javascript复制

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

代码语言：javascript复制

v-model v-text v-show v-if v-bind v-for v-on

image png

0 人点赞