vue数组变异方法

• 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变

• 变异数组方法 即保持数组方法原有功能不变 的前提下对其 进行功能拓展

1.1.1 push

往数组最后面添加一个元素，成功返回当前数组的长度

代码演示：

  <div id="app">
        <p>
            <input type="text" name="" id="" v-model="fname"> <button @click="add">添加</button>
        </p>
        <ul>
            <li v-for="(item,index) in list" v-bind:key="index">{{item}}</li>
        </ul>
    </div>

<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   fname:'',
                   list:['apple','orange','banana']
                }

            },
            methods:{
               add:function(){
                   this.list.push(this.fname)
                   //添加后，将文本框中的内容置空
                   this.fname=''
               }

            }
        })
    </script>

预览：

1.1.2 pop

删除数组的最后一个元素，成功返回删除元素的值

代码演示：

 <div id="app">
        <p>
            <input type="text" name="" id="" v-model="fname"> 
            <button @click="add">添加</button>
            <button @click="del">删除</button>
        </p>
        <ul>
            <li v-for="(item,index) in list" v-bind:key="index">{{item}}</li>
        </ul>
    </div>

<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   fname:'',
                   list:['apple','orange','banana']
                }

            },
            methods:{
               add:function(){
                   this.list.push(this.fname)
                   //添加后，将文本框中的内容置空
                   this.fname=''
               },
               del(){
                this.list.pop()
               }

            }
        })
    </script>

预览：

1.1.3 shift、unshift

删除数组的第一个元素，成功返回删除元素的值

添加数组的第一个元素，成功返回添加元素的值

代码演示：

 <div id="app">
       <div>
        <span>
            <input type="text" v-model="fname">
            <button @click="add">前面添加</button>
            <button @click="del">前面删除</button>
        </span>
       </div>
        <ul>
            <li v-for="(item,index) in list" v-bind:key="index">{{item}}</li>
        </ul>
    </div>

<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   fname:'',
                   list:['apple','orange','banana']
                }

            },
            methods:{
              add(){
                //前面添加
                this.list.unshift(this.fname)
                //文本框内容置空
                this.fname=''
              },
               del(){
                //前面删除
                this.list.shift()
               }

            }
        })
    </script>

预览：

1.1.4 splice

有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值

代码演示：

<div id="app">
        <ul>
            <button @click="del(index)">删除</button>
            <li v-for="item, index in list">
                <span>{{ item }}</span>
               
            </li>
        </ul>
       
    </div>

<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   fname:'',
                   list:['aaa','bbb','ccc','ddd']
                }

            },
            methods:{
             
               del(id){
               
                this.list.splice(id,2)
               }

            }
        })
    </script>

预览：

1.1.5 sort

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

代码演示：

 <div id="app">
        <ul>
            <button @click="_sort">排序</button>
            <li v-for="item, index in list">
                <span>{{ item }}</span>
               
            </li>
        </ul>
    </div>

<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   fname:'',
                   list:['ccc','ddd','bbb','aaa']
                }

            },
            methods:{
             
                _sort(){
                    this.list.sort()
                }

            }
        })
    </script>

预览：

1.1.6 reverse

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

代码演示：

<div id="app">
        <ul>
            <button @click="_reverse">颠倒数组</button>
            <li v-for="item, index in list">
                <span>{{ item }}</span>  
            </li>
        </ul>
    </div>

<script src="./js/vue.js"></script>
    <script>
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   fname:'',
                   list:['aaa','bbb','ccc','ddd']
                }

            },
            methods:{
             
                _reverse(){
                    this.list.reverse()
                }

            }
        })
    </script>

预览：