vue--v-model指令

本文介绍如何使用 Vue.js 的 v-model 指令实现购物车中商品数量变化时的价格实时更新功能。通过一个具体的示例,展示了 HTML 结构、Vue 实例配置及数据获取过程。
  1. v-model是表单控件指令
  2. 在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件来更新数据
  3. 以下是代码实践

html+vue

 <div class="quantity">
   <a href="javascript:;" >-</a>
   <input type="text" value="0"  v-model="item.productQuantity" disabled>
   <a href="javascript:;" >+</a>
 </div>
 <div class="price">
     <div class="item-price">{{ item.productPrice}}</div>
 </div>
 <div class="cart-tab-4">
    <div class="item-price-total">{{item.productPrice*item.productQuantity}}</div>
  </div>

json数据

{
    "status":1,
    "result":{
      "totalMoney":109,
      "list":[
        {
          "productId":"600100002115",
          "productName":"黄鹤楼香烟",
          "productPrice":19,
          "productQuantity":1,
          "productImage":"static/img/goods-1.jpg",
          "parts":[
            {
              "partsId":"10001",
              "partsName":"打火机",
              "imgSrc":"static/img/part-1.jpg"
            },
            {
              "partsId":"10002",
              "partsName":"打火机",
              "imgSrc":"static/img/part-1.jpg"
            }
          ]
        },

js

new Vue({
  el: '#app',
  data: {
    totalMoney: 0,
    productList: []
  },
  filters: {
  },
  mounted: function() {
    this.cartView()
  },
  methods: {
      cartView: function() {
        var _this = this;
        this.$http.get("data/cartData.json", {"id": 123}).then(function(res) {
          _this.productList = res.body.result.list;
          _this.totalMoney =  res.body.result.totalMoney;
        });
      }
      }
      })

只要我们通过加减来改变物品数量,那么我们的总金额(产品数量*产品单价)会发生实时计算

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值