当前位置 > it书童 > 大前端 > 正文

vue 操作数组

大前端 it书童 2020-02-11 10:59:40 0赞 0踩 222阅读 0评论

数组变异方法

在 Vue 中,直接修改对象属性的值无法触发响应式。即直接修改了对象属性的值,只有数据改了,但是页面内容并没有改变。要达到响应 dom 内容,需要使用数组变异方法,即保持数组方法原有功能不变的前提下对其进行功能拓展

  • push() 往数组最后面添加一个元素,成功返回当前数组的长度

  • pop() 删除数组的最后一个元素,成功返回删除元素的值

  • shift() 删除数组的第一个元素,成功返回删除元素的值

  • unshift() 往数组最前面添加一个元素,成功返回当前数组的长度

  • splice() 有三个参数,第一个是想要删除的元素的下标(必选),第二个是想要删除的个数(必选),第三个是删除 后想要在原位置替换的值

  • sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组

  • reverse() 将数组倒序,成功返回倒序后的数组

替换数组

不会改变原始数组,而是返回一个新数组

  • filter 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素

  • concat 方法用于连接两个或多个数组。该方法不会改变现有的数组

  • slice 方法可从已有的数组中返回选定的元素。该方法并不会修改数组,而是返回一个子数组

动态数组响应式数据

Vue.set(a, b, c) 让 触发视图重新更新一遍

a 要更改的数据
b 数据的第几项
c 更改后的数据
<div id="app">
<ul>
    <li v-for='item in list'>{{item}}</li>
</ul>
<div>
    <div>{{info.name}}</div>
    <div>{{info.age}}</div>
    <div>{{info.gender}}</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
    list: ['apple', 'orange', 'banana'],
    info: {
        name: '郭靖',
        age: 18
    }
    },
});
// 动态处理响应式数据
vm.$set(vm.list, 1, 'lemon');
vm.$set(vm.info, 'gender', '男');
</script>
转载须注明出处:https://www.itshutong.com/articles/431/vue-operation-array
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录