vue.js框架:数组的各种变异方法

今天阅读vue官网的学习教程,看到一个观察数组的变异方法。变异方法???excuse me??什么东西??guide就给了这么一堆东西:

原来这些方法如下:

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

Vue 包含的这些方法,它们会主动触发视图的更新(即前端数据会自动更新)。

<!--HTML--> 
<!--数组的各种变异方法--> 
<div id="arrayChange"> 
<div> push方法: 
<input type="text" v-model="text" @keyup.enter="methodByPush"> 
    <input type="button" value="测试功能" @click="methodByPush"> 
</div> 
<div> pop方法: 
    <input type="button" value="测试功能" @click="methodByPop"> 
</div> 
<div> shift方法: 
    <input type="button" value="测试功能" @click="methodByShift"> 
</div> 
<div> unshift方法: 
    <input type="text" v-model="text" @keyup.enter="methodByUnshift"> 
    <input type="button" value="测试功能" @click="methodByUnshift"> 
</div> 
<div> splice方法: 
    <input type="button" value="测试功能" @click="methodBySplice"> 
</div> 
<div> sort方法: 
    <input type="button" value="测试功能" @click="methodBySort"> 
</div> 
<div> reverse方法: 
    <input type="button" value="测试功能" @click="methodByReverse"> 
</div> 
<div> 测试值: 
    <ul> 
        <li v-for="item of items"> 
        <span v-text="item">
        </span> 
        </li> 
    </ul> 
</div> 
result显示的地方:<br> 
    <span v-text="result"></span> 
</div>
//JS代码 
var vm = new Vue({
    el: '#arrayChange',
    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()
        }
    }
})

用法简介:

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

猜你喜欢

转载自blog.csdn.net/u011280778/article/details/87102720
今日推荐