<body>
<div id="app">
<ul>
<li v-for="letter in letters" :key="letter">{{letter}}</li>
</ul>
<button @click="addletter">按钮</button>
</div>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
letters:['a','b','c','d']
},
methods:{
addletter(){
//1、在数组最后添加,可以追加多个
// this.letters.push('添加');
// this.letters.push('aa','bb','cc');
//2、删除数组最后一个元素
// this.letters.pop();
//3、删除数组第一个元素
// this.letters.shift();
//4、在数组最前面添加元素,可以追加多个,
// this.letters.unshift('添加');
// this.letters.unshift('aa','bb','cc');
//5、splice 作用:删除元素,插入元素,替换元素
//删除元素:splice(开始元素,准备删除几个元素,如果不传递则删除开始后的所有元素);
//插入元素:splice(开始元素,0,插入元素1,插入元素2,...);
//替换元素:splice(开始元素,要替换几个元素,替换元素1,替换元素2,...);
//sort();排序
// this.letters.sort();
//reverse();翻转
// this.letters.reverse();
//注意通过索引修改数组元素,不响应
this.letters[0] = 'aaaaaa';//不响应
this.letters.splice(0,1,'aaaaaa');//解决不响应问题,
//set(要修改的对象,索引值,修改后的值)
Vue.set(this.letters,0,'aaaaa');
}
}
});
</script>
</body>
Vue动态修改数组元素响应
最新推荐文章于 2023-04-08 21:41:25 发布