<title>vue基础扩展1---响应式属性监测</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.wrap { margin-bottom: 20px;min-height: 100px; border: 1px solid #333;}
</style>
</head>
<body>
<!--1、如果未声明对象的子属性，进行属性变更时，页面不能监测更新-->
<div id="app1" class="wrap">
<span>{
{obj.name}}</span>
<button @click='changeObj'>点击改变obj的name属性</button>
</div>
<script>
var vm1 = new Vue({
el:'#app1',
data:{
//obj : {}, // 无效
obj:{name}
},
methods:{
changeObj() {
this.obj.name = 'zhangsan'
}
}
});
</script>
<!--2、定义空数组内部对象的子属性，始终能够被监测更新-->
<div id="app2" class="wrap">
<li v-for="obj in objs">
{
{obj.id}}
{
{obj.count}}
<select>
<option v-for="n in obj.count" :value="n">{
{n}}</option>
</select>
</li>
<button @click='changeObjCount'>改变数组内部一项obj的属性</button>
</div>
<script>
var vm2 = new Vue({
el:'#app2',
data:{
objs : [],
},
created() {
this.objs = [{id:1,count:4},{id:2,count:4},{id:3,count:4}];
},
methods:{
changeObjCount(){
var obj = this.objs.find(ele=>ele.id==1);
obj.count=10;
}
}
});
</script>
<!--3、非空数组监测更新规律--->
<div id="app3">
<div>
<ul>
<li v-for="item in items">{
{item}}</li>
</ul>
</div>
</div>
<script>
var vm3 = new Vue({
el: '#app3',
data: {
items: ['data1','data2','data3'],
},
});
// 1)、push,pop,unshift,shift,splice等改变原数组长度的都是响应式的。
vm3.items.push('data1');
vm3.items.pop();
vm3.items.unshift('data2');
vm3.items.shift();
vm3.items.splice(2, 0, "data2");
//2)、filter,concat等不改变原数组长度，但是重新赋值，也可以是响应式的。
vm3.items = vm3.items.filter(function(item){return item.match(/data/)});
vm3.items = vm3.items.concat(['data5']);
//3)、操作数组角标设置属性，不能是响应式的，比如items[i] = {}
// 通过vm.$set(obj,index,value) 或 vm.$set(vm.$data,key,value)
vm3.$set(vm3.items, 1, 'x'); // 数组根据角标设置元素不会响应式的改变。
Vue.set(vm3.$data,"msg","改变的值"); // 对象有不能响应式，通过此方式实现响应式。
</script>