数组变异方法、替换数组、动态数组响应式数据

最新推荐文章于 2023-05-11 09:17:15 发布

鲸渔要加油

最新推荐文章于 2023-05-11 09:17:15 发布

阅读量620

点赞数

分类专栏：基础学习文章标签： vue vue.js es6 javascript js

本文链接：https://blog.csdn.net/qq_53283188/article/details/117337320

版权

基础学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

一、数组变异方法

在 Vue 中，直接修改对象属性的值无法触发 响应式，当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变
变异数组方法就是保持数组方法原有功能不变的前提下对其进行功能拓展，把对数组数据的处理变成了 响应式
会影响原始的数据

`push()`	往数组最后面添加一个元素，成功返回当前数组的长度
`pop()`	删除数组的最后一个元素，成功返回删除元素的值
`shift()`	删除数组的第一个元素，成功返回删除元素的值
`unshift`	往数组最前面添加一个元素，成功返回当前数组的长度
`splice()`	有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除后想要在原位置替换的值
`sort()`	sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
`reverse()`	reverse() 将数组倒序，成功返回倒序后的数组

二、替换数组

不会影响原始的数组，但总是返回一个新数组

`filter`	filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
`concat`	concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组
`slice`	slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组

<body>
	<div id="box">
		<div>
			<span>
				<input type="text" v-model='a'>
				<button @click='add'>添加</button>
				<button @click='del'>删除</button>
				<button @click='change'>替换</button>
			</span>
		</div>
		<ul>
			<li :key='i' v-for='(v,i) in list'>{{v}}</li>
		</ul>
	</div>

	<script src="./vue.js"></script>
	<script>
		let vm = new Vue({
			el: '#box',
			data: {
				a: '',
				list: ['1', '2', '3']
			},
			filters: {},
			methods: {
				add: function () {
					this.list.push(this.a)
				},
				del: function () {
					this.list.pop()
				},
				change: function(){
					this.list = this.list.slice(0,2)
				}
			}
		})
	</script>
</body>

三、动态数组响应式数据

Vue.set(a, b, c)
vm.$set(a, b, c)
a是要更改的数据、 b是索引、 c是更改后的数据

<body>
	<div id="box">
		<ul>
			<li :key='i' v-for='(v,i) in list'>{{v}}</li>
		</ul>
		<div>{{info.a}}</div>
		<div>{{info.b}}</div>
		<div>{{info.c}}</div>
	</div>

	<script src="./vue.js"></script>
	<script>
		let vm = new Vue({
			el: '#box',
			data: {
				list: ['1', '2', '3'],
				info: {
					a: 'aaa',
					b: 'bbb'
				}
			}
		})
		Vue.set(vm.list, 1, '99999')
		vm.$set(vm.list, 2, '00000')

		// vm.info.c = 'ccc'
		vm.$set(vm.info, 'c', 'ccc')
	</script>
</body>