vue中数据的监听

最新推荐文章于 2024-04-22 10:59:28 发布

原克技术

最新推荐文章于 2024-04-22 10:59:28 发布

阅读量1.3k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44432032/article/details/108686288

版权

我们如果在在定义初始数据的时候我们可以把我们可能用到的全部都定义到data中，并且设置为空值，这样的话，我们在后面使用的时候可以监听的到，不然普通的方式是无法监听的到的。
我们可以不在初始数据中定义我们可以使用Vue.set：使用方法为
Vue.set(this.user,'age',1);

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>添加和删除属性：$set、$delete</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="itany">
		<button @click="doUpdate">修改属性</button>
		<button @click="doAdd">添加属性</button>
		<button @click="doDelete">删除属性</button>

		<hr>	
		<h2>{{user.name}}</h2>
		<h2>{{user.age}}</h2>
	</div>

	<script>
		var vm=new Vue({
			el:'#itany',
			data:{
				user:{
					id:1001,
					name:'tom'
				}
			},
			methods:{
				doUpdate(){
					this.user.name='汤姆'
				},
				doAdd(){
					// this.user.age=25; //通过普通方式为对象添加属性时vue无法实时监视到
					// this.$set(this.user,'age',18); //通过vue实例的$set方法为对象添加属性，可以实时监视
					// Vue.set(this.user,'age',22);
					if(this.user.age){
						this.user.age++;
					}else{
						Vue.set(this.user,'age',1);
					}

					// console.log(this.user);
				},
				doDelete(){
					if(this.user.age){
						// delete this.user.age; //无效
						Vue.delete(this.user,'age');
					}
				}
			}
		});

	</script>
	
</body>
</html>

原克技术

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue中数据的监听

我们如果在在定义初始数据的时候我们可以把我们可能用到的全部都定义到data中，并且设置为空值，这样的话，我们在后面使用的时候可以监听的到，不然普通的方式是无法监听的到的。我们可以不在初始数据中定义我们可以使用Vue.set：使用方法为Vue.set(this.user,'age',1);<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>添加和删除属
复制链接

扫一扫