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. laravel使用JSON 类型方式进行存储

    Laravel 从 5.0 版本开始就已支持 JSON 数据的转换,但这样做的目的只是为了方便数据处理.你的数据依然以 TEXT 类型存放在你的数据库里.不过 MySQL 从 5.7 版本起开始支持原 ...

  2. 接触Java的15天,初步了解面向对象

    面向对象的三打特征:封装 ,继承 ,多态 . 图老师给的,叫我们好好看一看 对象(object):一个杯子,一台电脑,一个人,一件衣服  等,都可以称为对象. 类:类是对象的抽象的分类:比如,人类进行 ...

  3. JAVA的高并发基础认知 一

    一.多线程的基本知识 1.1进程与线程的介绍 程序运行时在内存中分配自己独立的运行空间,就是进程 线程:它是位于进程中,负责当前进程中的某个具备独立运行资格的空间. 进程是负责整个程序的运行,而线程是 ...

  4. Linux常用基本命令:tr-替换或者删除字符

    tr命令 作用:从标准输入中替换,缩减或者删除字符,并将结果输出到标准输出 格式:tr [option] [set1] [set2] tr [选项] [字符1] [字符2] 把y替换m, o替换e,并 ...

  5. JavaSE 集合概述

    1.对象的存储: 数组(基本数据类型 & 引用数据类型) 集合(引用数据类型) 2.集合框架 Collection 接口: 方法: iterator().toArray();  迭代器遍历集合 ...

  6. Java并发编程(九)并发容器

    并发容器的简单介绍: ConcurrentHashMap代替同步的Map(Collections.synchronized(new HashMap())),众所周知,HashMap是根据散列值分段存储 ...

  7. android一个倾斜的TextView,适用于标签效果

    描述: android一个倾斜的TextView,适用于标签效果 应用截图: 使用说明: <com.haozhang.lib.SlantedTextView android:layout_wid ...

  8. Expo大作战(三十六)--expo sdk api之 ImagePicker,ImageManipulator,Camera

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  9. C语言编程比赛WBS

  10. Excel表格规范

    数据处理: 在数据进行分析使用时,需要去除原始数据中的脏数据,让统计数据均为有效数据: 统一表格的格式:去除空格.强制换行符 CLEAN()函数:是去除单元格中的特殊字符: TRIM()函数:去除单元 ...