12_vue侦听器watch

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>


上一篇:使用runOnUiThread更新UI


下一篇:怎样创建并插入一个属性节点