1. 数据 : obj > name > 有值(zs) , 绑定: v-modle='obj.name' ==> ok
2. 在某个事件中, 直接添加属性,是不行的, this.$set() 处理
总结 :
1. 以后尽量先在data里声明好, 给一个初始值, 以后就可以正常使用了
2. 在一些第三方框架里, 我们就必须动态的添加额外的数据, 使用this.$set()
03-数据响应式问题.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
1. 数据 : obj > name > 有值(zs) , 绑定: v-modle='obj.name' ==> ok
2. 在某个事件中, 直接添加属性,是不行的, this.$set() 处理
总结 :
1. 以后尽量先在data里声明好, 给一个初始值, 以后就可以正常使用了
2. 在一些第三方框架里, 我们就必须动态的添加额外的数据, 使用this.$set()
-->
<div id="app">
<input type="text" v-model="obj.name" />
<button @click="fn">按钮</button>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
obj: {
// name :'zs'
}
},
methods: {
fn() {
console.log('123');
// 下面 这样直接添加是不行的, 是无法实现正常的数据劫持, 无法正常的进行数据响应式
// this.obj.name = 'zs';
// 解决方案：官方推荐使用 this.$set，三个参数：对象、属性、属性值
this.$set(this.obj, 'name', 'zs');
// 补充
// set(要修改的对象, 索引值, 修改后的值)
// 【在Vue身上，用 set方法】
// Vue.set(this.letters, 0, 'bbbbbb')
// 【在Vue实例身上，用 this.$set方法】
// this.$set(this.letters, 0, 'cccccc')
}
}
})
</script>
</body>
</html>