VUE 针对数组进行操作

最新推荐文章于 2023-07-14 16:13:11 发布

_微风轻拂

最新推荐文章于 2023-07-14 16:13:11 发布

阅读量1.2k

点赞数

分类专栏： Web 文章标签： vue

本文链接：https://blog.csdn.net/m0_53950051/article/details/117121724

版权

Web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

说明：VUE针对数组的操作，开发了一套完成的API。

push( ) 在数组的末尾添加数据
pop( ) 删除数组中的最后一个元素
shirt( ) 删除数组的第一个元素
upshift( )在数据开头追加数据
splice( )在指定的位置替换数据
sort( )对数据进行排序（按照编码进行排序，由小到大）
reverse( )数组反转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组案例</title>
	</head>
	<body>
		<div id="app">
			<span v-for="item in array" v-text="item"></span><br>
			数据: <input type="text" v-model="data"/> 
			<button @click="push">追加</button>
			<button @click="pop">移除最后一个</button>
			<button @click="shift">删除第一个元素</button>
			<button @click="unshift">在开头追加元素</button>
			<button @click="splice">替换元素</button>
			<button @click="sort">排序</button>
			<button @click="reverse">反转</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					array: [5,7,4,1],
					data: ''
				},
				methods: {
					push(){
						this.array.push(this.data)
					},
					pop(){
						//移除最后一个数据
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					unshift(){
						this.array.unshift(this.data)
					},
					splice(){
						//关于参数说明 参数1:操作数据起始位置 index
						//			  参数2:操作数据的个数
						//			  参数3:要替换的值
						//删除元素     删除第一个元素的后2位
						//this.array.splice(1,2,'')
						//替换元素     替换前2个元素(将元素当做整体进行替换)
						//替换后的元素可以有多个
						this.array.splice(0,2,this.data)
					},
					sort(){
						this.array.sort()
					},
					reverse(){
						this.array.reverse()
					},
				}
				
			})
		</script>
	</body>
</html>