vue--v-model指令

最新推荐文章于 2024-09-07 18:20:05 发布

原创最新推荐文章于 2024-09-07 18:20:05 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

vue-js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用 Vue.js 的 v-model 指令实现购物车中商品数量变化时的价格实时更新功能。通过一个具体的示例，展示了 HTML 结构、Vue 实例配置及数据获取过程。

v-model是表单控件指令
在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件来更新数据
以下是代码实践

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"
            }
          ]
        },

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