Vue动态修改数组元素响应

2021-01-14 09:34:14 阅读：316 来源： 互联网

<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,letters,数组,删除,元素,响应,splice,替换
来源： https://blog.csdn.net/wendyNo/article/details/112599217

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue动态修改数组元素响应