<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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('aaa', 'bbb', 'ccc')
// 响应式方法2:pop():删除数组最后一个元素
// this.letters.pop()
// 响应式方法3:shift():删除数组第一个元素
// this.letters.shift()
// 响应式方法4:unshift():在数组最前面添加元素
// this.letters.unshift('aaa')
// this.letters.unshift('aaa', 'bbb')
// 响应式方法5:splice():插入元素\删除元素\替换元素，第一个参数表示从哪个元素开始
// 删除元素：第二个参数传入你要删除几个元素(如果没有传，后面的全删)
// 替换元素：第二个参数传入你要添加的元素个数，后面写要添加的元素
// 添加元素：第二个参数传入0，之后添加要添加的元素
// this.letters.splice(1)
// this.letters.splice(1, 3, 'n', 'm', 'g')
// this.letters.splice(1, 0, 'y', 'u')
// 响应式方法6:sort():对元素进行排序
// 响应式方法7:reverse():对所有元素进行翻转
// this.letters.reverse()
// 非响应式方法：通过索引值修改数组元素
// this.letters[2] = 'ccc'
// 响应式修改数组元素方法1:splice()
// this.letters.splice(2, 1, 'ccc')
// 响应式修改数组元素方法2：Vue.set(要修改的对象,索引值,修改后的值)
Vue.set(this.letters, 2, 'ccc')
}
},
})
</script>
</body>
</html>
Vue基础：数组中的响应式方法
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
