vue push() pop() shift() unshift() sort() reverse() splice()

<dir id="app">
	<ul>
		<li v-for="(book, index) in books">{{index + 1}} - {{book}}</li>
	</ul>
</dir>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			books: [
				'java',
				'vue'
			]
		}
	});
	
	//push()方法可向数组的末尾添加一个或多个元素,并返回新的长度。
	vm.books.push('c', 'c#');
	console.log(vm.books.length);
	
	//pop()方法用于删除并返回数组的最后一个元素。
	var _pop = vm.books.pop();
	console.log(_pop + " " + vm.books.length);
	
	//shift()方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
	var _shift = vm.books.shift();
	console.log(_shift + " " + vm.books.length);
	
	//unshift()方法可向数组的开头添加一个或多个元素,并返回新的长度。
	vm.books.unshift('js', 'hehe');
	console.log(vm.books.length);
	
	//sort()方法用于对数组的元素进行排序。
	vm.books.sort();
	
	//reverse()方法用于颠倒数组中元素的顺序。
	vm.books.reverse();
	
	//splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值(该方法会改变原始数组)
	//index:数组开始下标       
	//len: 替换/删除的长度       
	//item:替换的值,删除操作item为空
	vm.books.splice(1, 0, 'xyz'); //添加
	console.log(vm.books); //["vue", "xyz", "js", "hehe", "c"]
	vm.books.splice(0, 1, 'aaa'); //替换
	console.log(vm.books); //["aaa", "xyz", "js", "hehe", "c"]
	vm.books.splice(3, 1); //删除
	console.log(vm.books); //["aaa", "xyz", "js", "c"]
	
</script>

 

Logo

前往低代码交流专区

更多推荐