vue替换数组

不会改变原始数组，但总是返回一个新数组

1.1.1 filter

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

代码演示：

<div id="app">
    <div>
        <button @click="retain">保留非数字</button>
    </div>
    <ul>
        <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>
    <hr>
    <div>
        <h2>通过filter过滤得到的新数组中的内容是：</h2>
        <ol>
            <li v-for="(value,index) in newList" :key="index">{{value}}</li>
        </ol>
    </div>
</div>

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

                return{
                   list:[10,'apple',50,'orange',9,32,'banana',19,22,50],
                   
                   newList:[]
                }

            },
            methods:{
                retain(){
                    this.newList=this.list.filter(function(item){
                        console.log(typeof item=='string');
                        return typeof item=='string'
                    })
                }

            }
        })
    </script>

预览：

 

 

1.1.2 concat

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

代码演示：

<div id="app">
        <div v-for="(item,index) in list1" v-bind:key="index">{{item}}</div>
        <hr>
        <div v-for="(item,index) in list2" :key="index">{{item}}</div>
    <div>
        <button @click="_concat">连接</button>
    </div>

    <ul>
        <li v-for="(item,index) in concatList" :key="index">{{item}}</li>
    </ul>
</div>

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

                return{
                   list1:['apple','orange','banana'],
                   list2:['A','B','C'],
                   concatList:[]
                }

            },
            methods:{
                _concat(){
                    this.concatList=this.list1.concat(this.list2)
                 
                }

            }
        })
    </script>

预览：

1.1.3 slice

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

代码演示：

 <div id="app">
   
    <div>
        <button @click="_slice">点击截取</button>
    </div>

    <ul>
        <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>
</div>

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

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

            },
            methods:{
                _slice(){
                    this.list=this.list.slice(2,4)
                 
                }

            }
        })
    </script>

预览：