JavaScript

超轻量级php框架startmvc

浅析vue.js数组的变异方法

更新时间:2020-07-14 14:30:02 作者:startmvc
Vue包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:push()pop()s

Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:

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

都有什么功能?动手试验了一下:


<body>
 <div id="app">
 <div>
 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>
 </div>
 <div>
 pop方法:
 <input type="button" value="测试功能" @click="methodByPop">
 <ul>
 <li v-for="item of items">
 <span v-text="item"></span>
 </li>
 </ul>
 </div>
 <div>
 shift方法:
 <input type="button" value="测试功能" @click="methodByShift">
 <ul>
 <li v-for="item of items">
 <span v-text="item"></span>
 </li>
 </ul>
 </div>
 <div>
 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>
 </div>
 <div>
 splice方法:
 <input type="button" value="测试功能" @click="methodBySplice">
 <ul>
 <li v-for="item of items">
 <span v-text="item"></span>
 </li>
 </ul>
 </div>
 <div>
 sort方法:
 <input type="button" value="测试功能" @click="methodBySort">
 <ul>
 <li v-for="item of items">
 <span v-text="item"></span>
 </li>
 </ul>
 </div> 
 <div>
 reverse方法:
 <input type="button" value="测试功能" @click="methodByReverse">
 <ul>
 <li v-for="item of items">
 <span v-text="item"></span>
 </li>
 </ul>
 </div>
 result显示的地方:<br>
 <span v-text="result"></span>
 </div>

<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没学好,正好趁这次把这些方法的用法都给捡回来!