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

阅读目录

1.普通属性的值进行监听

vue中提供了一个watch方法，它用于观察vue实列上的数据变动，来响应数据的变化。

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

<!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;">

        <input type="text" v-model="count" />

      </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

      },

      watch: {

        count(newValue, oldValue) {

          console.log('新输入的值为：'+newValue); // 会输出新值

          console.log('原来的值为:'+oldValue); // 会输出旧值

        }

      }

    })

  </script>

</html>

查看效果-看控制台消息

2.监听对象的变化

如下代码：

<!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;">

        <input type="text" v-model="tform.count" />

      </div>

    </div>

  </body>

  <script src="https://tugenhua0707.github.io/vue/vue-watch/vue.js"></script>

  <script>

    var app = new Vue({

      el: '#app',

      data: {

        tform: {

          count: 1

        }

      },

      watch: {

        tform: {

          handler(newValue, oldValue) {

            // newValue 和 oldValue 是一样的

            console.log(newValue);

            console.log(oldValue);

          },

          // 深度监听 监听对象，数组的变化

          deep: true

        }

      }

    })

  </script>

</html>

查看效果-看控制台消息

3.监听对象中具体属性值的变化

如下代码：

<!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;">

        <input type="text" v-model="tform.count" />

      </div>

    </div>

  </body>

  <script src="https://tugenhua0707.github.io/vue/vue-watch/vue.js"></script>

  <script>

    var app = new Vue({

      el: '#app',

      data: {

        tform: {

          count: ''

        }

      },

      watch: {

        'tform.count': {

          handler(newValue, oldValue) {

            console.log('变动之前的值:' + oldValue);

            console.log('变动后的值：'+ newValue);

          },

          // 深度监听 监听对象，数组的变化

          deep: true

        }

      }

    })

  </script>

</html>

查看效果-看控制台消息

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

<!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;">

        <input type="text" v-model="tform.count" />

      </div>

    </div>

  </body>

  <script src="https://tugenhua0707.github.io/vue/vue-watch/vue.js"></script>

  <script>

    var app = new Vue({

      el: '#app',

      data: {

        tform: {

          count: ''

        }

      },

      computed: {

        newNum: function() {

          return this.tform.count;

        }

      },

      watch: {

        newNum: {

          handler(newVal, oldVal) {

            console.log('新值:' +newVal);

            console.log('原来的值:' +oldVal);

          },

          deep: true

        }

      }

    })

  </script>

</html>

查看效果-看控制台消息

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

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

代码如下：

<ul class="list">

  <li>

    <label>第1项</label>

    <input type="text" v-model="item1" />

  </li>

  <li>

    <label>第2项</label>

    <input type="text" v-model="item2" />

  </li>

</ul>

我希望的是，如上代码 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>

查看效果-看控制台消息

vue 如何在循环中 "监听" 的绑定v-model数据的更多相关文章

  1. Vue 为什么在 HTML 中监听事件?

    为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...

  2. vue mounted中监听div的变化

    vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...

  3. 在vue中监听storage的变化

    1.首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEv ...

  4. vue项目中监听sessionStorage值发生变化

    首先在main.js中给Vue.protorype注册一个全局方法, 其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’, 然后创建一个StorageEv ...

  5. vue 定义全局函数，监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  6. vue解惑之v-on(事件监听指令)

    一.v-on指令 vue中用v-on指令来监听DOM事件,并触发相应的代码.比如v-on:click,表示监听了点击事件. 二.事件修饰符 在事件处理函数中调用 event.preventDefaul ...

  7. 在Javascript中监听flash事件(转)

    在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.cal ...

  8. Fragment中监听onKey事件，没你想象的那么难。

    项目中越来越多的用到Fragment,在用Fragment取代TabHost的时候遇到了一个问题,我们都知道,TabHost的Tab为Activity实例,有OnKey事件,但是Fragment中没有 ...

  9. wemall app商城源码Fragment中监听onKey事件

    wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享android开发Fragment中监听onK ...

随机推荐

  1. 如何完全卸载oracle和删除oracle在注册表中的注册信息

    卸载步骤介绍 1.停止所有Oracle相关的服务 操作方法: 控制面板-->管理工具 -->服务 -->将所有oracle开头的服务均停止 2.卸载Oracle 10g数据库服务器组 ...

  2. ORM作业

    使用之前学到过的操作实现下面的查询操作:1. 查询平均成绩大于60分的同学的id和平均成绩:2. 查询所有同学的id.姓名.选课的数量.总成绩; 3. 查询姓“李”的老师的个数: 4. 查询没学过“李 ...

  3. c语言学习笔记-continue

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 一.continue函数意义 用于跳过本次循环余下语句,转去判断是否需要执行下次循环 二.continue使用案例 编写代码,对 ...

  4. csharp:FTP Client Library using FtpWebRequest or Sockets

    https://netftp.codeplex.com/SourceControl/latest http://ftplib.codeplex.com/ https://www.codeproject ...

  5. CoreCRM 开发实录 —— 基于 AntDesign 的新 UI

    上一篇说到,因为有新朋友加入,对前端开发有了新的要求.原来基于 Bootstrap 的 UI 就不要了.在网上(其实是 GitHub 上)逛了几圈,最后使用了 antd-admin 这个框架做为基础模 ...

  6. “京东金融”主页效果 RecyclerView联动

    先上效果图吧: 第一个想到的实现方式是上面使用horizontalScrollview,下面使用Viewpager,经过尝试之后发现二者API有限,不能达到理想效果.几经折腾,最后上下都使用了自定义的 ...

  7. (后台)org.apache.catalina.connector.ClientAbortException: null

    比如错误日志是这样的: org.apache.catalina.connector.ClientAbortException: null 那么问题基本上就是服务器准备进行response的时候,发现连 ...

  8. git批量修改已经提交的commit的姓名和邮箱

    首先,我们创建change.sh脚本,并根据个人信息复制以下脚本. #!/bin/sh git filter-branch --env-filter ' OLD_EMAIL="填写原来的邮箱 ...

  9. 使用wxpy来实现自动发送消息统计微信好友信息的功能

    发送消息太频繁会出现禁言消息 1:导入wxpy模块 pip install wxpy pip3 install wxpy #二者选一 调用模块 # 导入模块 from wxpy import * # ...

  10. JVM内核优化

    1.垃圾回收器 JVM垃圾回收器有串行和并行两种. 1.1 Serial收集器(串行,单线程),现在使用较少 Serial一般收集新生代 SerialOld一般收集老年代(采用标记压缩算法) 1.2 ...