vue 如何在循环中 "监听" 的绑定v-model数据
vue 如何在循环中 "监听" 的绑定v-model数据
阅读目录
- 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数据的更多相关文章
- Vue 为什么在 HTML 中监听事件?
为什么在 HTML 中监听事件? 你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念.不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑 ...
- vue mounted中监听div的变化
vue mounted中监听div的变化 <div style="width:200px;height:30px;background: #0e90d2" id=" ...
- 在vue中监听storage的变化
1.首先在main.js中给Vue.protorype注册一个全局方法,其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’,然后创建一个StorageEv ...
- vue项目中监听sessionStorage值发生变化
首先在main.js中给Vue.protorype注册一个全局方法, 其中,我们约定好了想要监听的sessionStorage的key值为’watchStorage’, 然后创建一个StorageEv ...
- vue 定义全局函数，监听android返回键事件
vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...
- vue解惑之v-on(事件监听指令)
一.v-on指令 vue中用v-on指令来监听DOM事件,并触发相应的代码.比如v-on:click,表示监听了点击事件. 二.事件修饰符 在事件处理函数中调用 event.preventDefaul ...
- 在Javascript中监听flash事件(转)
在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.cal ...
- Fragment中监听onKey事件，没你想象的那么难。
项目中越来越多的用到Fragment,在用Fragment取代TabHost的时候遇到了一个问题,我们都知道,TabHost的Tab为Activity实例,有OnKey事件,但是Fragment中没有 ...
- wemall app商城源码Fragment中监听onKey事件
wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享android开发Fragment中监听onK ...
随机推荐
- 【Dubbo&&Zookeeper】3、Failed to read schema document 'http://code.alibabatech.com/schema/dubbo/dubbo.xsd'问题解决方法
转自:http://blog.csdn.net/gaoshanliushui2009/article/details/50469595 我们公司使了阿里的dubbo,但是阿里的开源网站http://c ...
- 【23】备忘录模式（Memento Pattern）
一.引言 在上一篇博文分享了访问者模式,访问者模式的实现是把作用于某种数据结构上的操作封装到访问者中,使得操作和数据结构隔离.而今天要介绍的备忘者模式与命令模式有点相似,不同的是,命令模式保存的是发起 ...
- SQL Server 连接(内连接，外连接，完全连接，交叉连接，联合)
1.连接 有时候需要将连个表的数据合并成一个结果集来显示.为了解决这个问题,就需要用到JOIN连接. 2.内部连接 内部连接根据一个或几个共同的字段将记录匹配到一起.内部连接仅仅返回那些存在字段匹配的 ...
- blfs（systemd版本）学习笔记-编译安装openssh软件包
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! openssh项目地址:http://www.linuxfromscratch.org/blfs/view/stable/pos ...
- 在 Ubuntu 18.04 下安装 fcitx 及搜狗拼音输入法
感觉自己傻逼透了,之前在 16.04 时折腾着要装 ibus 和 rime 输入法,现在 18.04 默认安装 ibus 了,又因为 rime 的智能联想太弱,打字不爽,又想装回搜狗一劳永逸... 环 ...
- 小结：ES7——async和await初识
一.async async其实是ES7才有有的关键字,async的意思是异步,顾名思义是有关异步的操作 async用于声明一个函数是异步的. 通常情况下async.await都是跟随promise一起 ...
- Linux Linux内核参数调优
Linux内核参数调优 by:授客 QQ:1033553122 关于调优的建议: 1.出错时,可以查看操作系统日志,可能会找到一些有用的信息 2.尽量不要“批量”修改内核参数,笔者就曾这么干过,结果“ ...
- beego+vue父子组件通信（父子页面传值、父子组件传值、父子路由传值）
场景:有head和foot,为父组件 侧栏tree为子组件 点击tree,右侧孙组件根据点击tree的id,来更改表格内容. 首先是父子(本例中是子组件与孙组件)通信,目前是父传到子,暂时还没有子传到 ...
- Android Studio 在项目中引用第三方jar包
在Android Studio项目中引用第三方jar包的方法: 步骤: 1.在build.gradle文件中添加如下代码: 备注:要添加在Android作用域下 sourceSets { main { ...
- jmeter利用自身代理录制脚本
在利用代理录制脚本时一定要安装java jdk,不然不能录制的. 没有安装过java jdk安装jmeter后打开时会提示安装jdk,但是mac系统中直接打开提示安装jdk页面后下载的java并不是j ...