演示VUE的侦听器 and 计算属性

最新推荐文章于 2024-07-15 17:15:41 发布

qq_38848781

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量200

点赞数

分类专栏： VUE 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_38848781/article/details/127978213

版权

VUE 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

演示VUE的侦听器 and 计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="./lib/vue-2.6.12.js"></script>
		<title>侦听器 and 计算属性</title>
	</head>
	<body>
		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="侦听器">
			<div id="app01">
				<p>strList_01.id:{{str_01}}(轨迹{{str_02}})</p>
				<input type="text" v-model.lazy="str_01" />
				<br />
				
				<p>strList_01.id:{{strList_01.id}}({{strList_01.id_trail}})</p>
				<input type="text" v-model="strList_01.id" />
				<p>strList_01.name:{{strList_01.name}}({{strList_01.name_trail}})</p>
				<input type="text" v-model="strList_01.name" />
				<br />
				
				<p>strList_02.name:{{strList_02.name}}({{strList_02.name_trail}})</p>
				<input type="text" v-model="strList_02.name" />
				
			</div>
			<script>
				new Vue({
					el: '#app01',
					data: {
						str_01:'',
						str_02:'',
						strList_01:{
							id_trail:'',
							name_trail:'',
							id:'',
							name:''
						},
						strList_02:{
							name:''
						}
					},
					watch: {//watch节点用于定义侦听器
						str_01(newStr,oldStr){
							this.str_02+='{'+oldStr+'->'+newStr+'}';
						},
						//对象侦听器
						strList_01:{
							handler(newObj){
								newObj.id_trail   = '->' + newObj.id;
								newObj.name_trail = '->' + newObj.name;
							},
							// 表示页面初次渲染好之后，就立即触发一次当前的 watch 侦听器
							immediate:true,
							//对象侦听器
							deep:true
						},
						//监听对象里的具体属性要加单引号
						'strList_02.name':{
							handler(newObj){
								console.log(newObj);
							},
							deep:true
						}
					}
				});
			</script>
		</div>
		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="计算属性">
			<!-- 计算属性 -->
			<div id="app02">
				<!-- 计算属性可以直接在标签里使用 -->
				<p  :style="{ backgroundColor: `rgb(${num_r}, ${num_g}, ${num_b})` }"  >
				{{num_r}} + {{num_g}} + {{num_b}} = {{num_rgb}} 
				</p>
				<input type="number" @keyup="agb_mod" v-model.lazy="num_r" />
				<input type="number" @keyup="agb_mod" v-model.lazy="num_g" />
				<input type="number" @keyup="agb_mod" v-model.lazy="num_b" />
			</div>
			<script>
				new Vue({
					el: '#app02',
					data: {
						num_r:0,
						num_g:0,
						num_b:0
					},
					//计算属性可以在computed节点下声明，如此可以被方法调用
					computed:{
						num_rgb(){ return parseInt(this.num_r)+parseInt(this.num_g)+parseInt(this.num_b) }
					},
					methods:{
						agb_mod(){
							console.log(this.num_rgb);
						}
					}
				});
			</script>
		</div>
		
	</body>
</html>