vue 如何在循环中 “监听“ 的绑定v-model数据

柔光的暖阳◎ 2022-10-08 15:28 23阅读 0赞

> 1.普通属性的值进行监听  
> vue中提供了一个watch方法，它用于观察vue实列上的数据变动，来响应数据的变化。

下面我们来分别学习下使用watch对对象的属性值进行监听，有如下几种，普通属性的监听，对象的属性值的监听。最后一种就是对input中的v-modle的动态数组的数据属性进行监听，最后一种不是使用watch来监听，本文的重点是最后一种的实现。在项目中会经常碰到使用v-model监听数据的。

> 2.监听对象的变化

> 3.1监听对象中具体属性值的变化

> 3.2 第二种方法 可以借助 computed 如下代码：

> 4.vue 如何在循环中 “监听” 的绑定v-model数据

现在有这么一个需求，页面上有多项输入框，但是具体有多少项，我也不知道，它是通过"新增一项"按钮点击事件，点击一下，就新增一项；如下图这个样子；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYXdlbnlpMTIzNA_size_16_color_FFFFFF_t_70]

我希望的是，如上代码 v-model=“item1”, item2, 依次类推 … item(n);

然后会对input的输入框值进行监听，比如有这么一个需求，如果输入框的值小于0的话，让input输入框自动变为0，也就是说输入框最小值为0，且为数字。

如果上面的 item1 和 item2 只有两项的话，那么我们可以使用watch来监听 item1 和 item2属性，但是如果页面上有多项的话，这样就不好使用watch来监听数据了。所以我们可以换一种方式来监听，使用input事件来监听输入框值的变化了。如下代码：

<!DOCTYPE html>
    <html>
      <head>
        <title>演示Vue</title>
        <style>
          ul,li { list-style: none;}
          .list { float: left; width:200px;}
          button { float:left; margin-top:18px;}
        </style>
      </head>
      <body>
        <div id="app">
          <div style="width:100%;overflow:hidden;">
            <ul class="list">
              <li v-for="(item, index) in arrs">
                <label>第{ { index+1}}项</label>
                <input type="number" v-model="item.customItem" @input="changeFunc(item, index)"/>
              </li>
            </ul>
            <button @click="newadd">新增一项</button>
          </div>
        </div>
      </body>
      <script src="https://tugenhua0707.github.io/vue/vue-watch/vue.js"></script>
      <script>
        var app = new Vue({ 
          el: '#app',
          data: { 
            count: 1,
            arrs: [{ 'value': 1, 'customItem': ''}]
          },
          methods: { 
            newadd() { 
              this.count++;
              this.arrs.push({ 'customItem': '', 'value': this.count});
            },
            changeFunc(item, index) { 
              this.arrs[index].customItem = item.customItem;
              this.watchVal();
            },
            // 监听值的变化
            watchVal() { 
              const arrs = this.arrs;
              if (arrs.length > 0) { 
                for (let i = 0; i < arrs.length; i++) { 
                  let customItem = arrs[i].customItem;
                  if (customItem * 1 < 0) { 
                    this.$set(this.arrs[i], 'customItem', 0);
                  }
                }
              }
            }
          }
        })
      </script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYXdlbnlpMTIzNA_size_16_color_FFFFFF_t_70]: /images/20221005/7d5e27fd169c4b839a57d295ab96b958.png