12_vue侦听器watch

最新推荐文章于 2023-11-30 10:44:26 发布

嫣夜来

最新推荐文章于 2023-11-30 10:44:26 发布

阅读量137

点赞数 1

分类专栏： Vue前端框架

本文链接：https://blog.csdn.net/qq_41865652/article/details/102776029

版权

Vue前端框架专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、vue侦听器的作用

监听data里的数据的变化情况,watch在初始化绑定的时候不会执行，等到改变之后才会去侦听计算; 如果在侦听器中增加immediate:true属性,初始化绑定的时候就会执行。

2、实例代码演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>02_侦听器watch</title>
</head>
<body>
	<div id="app">
		姓：<input type="text" v-model.lazy.trim="first_name"><br>
		名：<input type="text" v-model.lazy.trim="last_name"><br>
		全名：<span>{{fullname}}</span>
	</div>

		
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
		var app = new Vue({
		el: '#app',
		data: {
			first_name: '李',
			last_name: '四',
		},
		computed: {
			fullname(){
				return this.first_name + this.last_name;
			}
		},
		// 监听data里的数据的变化情况,watch在初始化绑定的时候不会执行，等到改变之后才会去侦听计算; 如果在侦听器中增加immediate:true属性,初始化绑定的时候就会执行
		watch: {
			immediate: true, //侦听器初始化就执行
			first_name: {
				handler(newVal, oldVal){
					if(newVal != '李三'){
						return this.first_name = '李';
					}
					return this.first_name = newVal;
					
				}
			},
			last_name: {
				handler(newVal, oldVal){
					if(newVal != '四五'){
						return this.last_name = '四';
					}
					return this.last_name = newVal;
				}
			},

		}
		
	});
</script>
</html>

嫣夜来

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12_vue侦听器watch

1、vue侦听器的作用监听data里的数据的变化情况,watch在初始化绑定的时候不会执行，等到改变之后才会去侦听计算; 如果在侦听器中增加immediate:true属性,初始化绑定的时候就会执行。2、实例代码演示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫

专栏目录