前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >(28)打鸡儿教你Vue.js

(28)打鸡儿教你Vue.js

作者头像
达达前端
发布2019-07-08 00:47:31
2360
发布2019-07-08 00:47:31
举报
文章被收录于专栏:达达前端达达前端

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

代码语言: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
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.07.05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档