使用场景:使用Vue中的v-for展示数组中的元素。
响应式就是通过方法把数组中的元素改变了,页面上的也会更新
下面的代码经过实际测试和老师讲解,自行测试的时候取消某一个方法的语句的注释即可
响应式的
<body>
<div id="app">
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: ['a','b','c','d']
},
methods: {
btnClick() {
// 1.push方法:在数组最后面添加元素
// this.letters.push('aaa')
// this.letters.push('aaaa','bbbb','cccc')
// 2.pop方法:删除数组中最后一个元素
// this.letters.pop()
// 3.shift方法:删除数组中第一个元素
// this.letters.shift()
// 4.unshift方法:在数组最前面添加元素
// this.letters.unshift('aaa')
// this.letters.unshift('aaaa','bbbb','cccc')
// 5.splice方法:删除元素、插入元素、替换元素
// this.letters.splice(1,0,'x','y','z')
// 6.sort方法:排序
// 7.reverse方法:反转
// this.letters.reverse()
}
}
})
</script>
</body>
不是响应式的
<body>
<div id="app">
<!-- 响应式就是通过方法把数组中的元素改变了,页面上的也会更新 -->
<ul>
<li v-for="item in letters">{{item}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊世界!',
letters: ['a','b','c','d']
},
methods: {
btnClick() {
// 通过索引值(下标)修改数组中的元素,不是响应式的
// this.letters[0] = 'nnnnnn'
}
}
})
</script>
</body>
- 可以用通过splice实现
this.letters.splice(0,1,'nnnnnn')
- 也可以通过Vue的set方法修改,也是响应式的,
set(要修改的对象, 索引值, 修改后的值)
Vue.set(this.letters, 0, 'nnnnnn')
但是如果数组中的元素是对象,通过数组下标修改
- 修改某一个对象的属性值,这是响应式的
<body>
<div id="app">
<ul v-for="obj in letters">
<li v-for="(value, item) in obj">{{item}} - {{value}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: [
{
id: 1,
name: '名字1'
},
{
id: 2,
name: '名字2'
},
{
id: 3,
name: '名字3'
}
]
},
methods: {
btnClick() {
this.letters[1].name = '555'
}
}
})
</script>
</body>
- 通过下标替换某一个对象元素,这不是响应式的
<body>
<div id="app">
<ul v-for="obj in letters">
<li v-for="(value, item) in obj">{{item}} - {{value}}</li>
</ul>
<button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
letters: [
{
id: 1,
name: '名字1'
},
{
id: 2,
name: '名字2'
},
{
id: 3,
name: '名字3'
}
]
},
methods: {
btnClick() {
this.letters[1] = {
id: 5,
name: '555'
}
}
}
})
</script>
</body>