时间:2021-07-01 10:21:17 帮助过:4人阅读
Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
都有什么功能?动手试验了一下:
<body> <p id="app"> <p> push方法: <input type="text" v-model="text" @keyup.enter="methodByPush"> <input type="button" value="测试功能" @click="methodByPush"> <ul> <li v-for="item of items"> <span v-text="item"></span> </li> </ul> </p> <p> pop方法: <input type="button" value="测试功能" @click="methodByPop"> <ul> <li v-for="item of items"> <span v-text="item"></span> </li> </ul> </p> <p> shift方法: <input type="button" value="测试功能" @click="methodByShift"> <ul> <li v-for="item of items"> <span v-text="item"></span> </li> </ul> </p> <p> unshift方法: <input type="text" v-model="text" @keyup.enter="methodByUnshift"> <input type="button" value="测试功能" @click="methodByUnshift"> <ul> <li v-for="item of items"> <span v-text="item"></span> </li> </ul> </p> <p> splice方法: <input type="button" value="测试功能" @click="methodBySplice"> <ul> <li v-for="item of items"> <span v-text="item"></span> </li> </ul> </p> <p> sort方法: <input type="button" value="测试功能" @click="methodBySort"> <ul> <li v-for="item of items"> <span v-text="item"></span> </li> </ul> </p> <p> reverse方法: <input type="button" value="测试功能" @click="methodByReverse"> <ul> <li v-for="item of items"> <span v-text="item"></span> </li> </ul> </p> result显示的地方:<br> <span v-text="result"></span> </p>
<script> var vm = new Vue({ el: '#app', data: { items: [], text: '', result: '' }, methods: { methodByPush: function () { this.result = this.items.push(this.text) this.text = '' }, methodByPop: function () { this.result = '' this.result = this.items.pop() }, methodByShift: function () { this.result = '' this.result = this.items.shift() }, methodByUnshift: function () { this.result = '' this.result = this.items.unshift(this.text) this.text = '' }, methodBySplice: function () { this.result = '' this.result = this.items.splice(2,1,'yovan') }, methodBySort: function () { this.result = '' this.result = this.items.sort() }, methodByReverse: function () { this.result = '' this.result = this.items.reverse() alert(this.result) } } }) </script>
得到下面的结论:
push() 往数组最后面添加一个元素,成功返回当前数组的长度
pop() 删除数组的最后一个元素,成功返回删除元素的值
shift() 删除数组的第一个元素,成功返回删除元素的值
unshift() 往数组最前面添加一个元素,成功返回当前数组的长度
splice() 有三个参数,第一个是想要删除的元素的下标(必选),第二个是想要删除的个数(必选),第三个是删除
后想要在原位置替换的值(可选)
sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse() 将数组倒序,成功返回倒序后的数组
后来发现这些应该都是javascript本来的方法吧?以前javascript没学好,正好趁这次把这些方法的用法都给捡回来!
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
关于vue检测对象和数组的变化分析
VUEJS 2.0 子组件访问/调用父组件
关于.vue文件解析的实现
以上就是关于vue.js数组的变异方法的详细内容,更多请关注Gxl网其它相关文章!