Vue---day05---过滤排序

过滤排序

有时我们需要对数据进行一些操作，再使他出现在网页上，比如简单的排序，过滤。但是又不能改变源数据的时候，就可以用计算属性来进行操作

		<div id="app">
            <li v-for="i in nextnums">
                {{i}}
            </li>
        </div>
        <script>
            var vm = new Vue({
            ht    el:"#app",
                data:{
                    nums:[1,2,3,4,5,6]
                },
                computed:{
                    nextnums:function(){
                        return this.nums.filter((item) => {
                            return item%2===0;
                        })
                    }
                }
            })
        </script>

可以发现不能整除2的元素都被过滤了。而原来Vue实例里的数据却没有发生改变。
但是如果nums是nums:[[1,2,3,4,5,6],[11,212,3,4,23,13]]样子的，那么需要双重过滤的话，计算属性可能不太适用，这时就可以直接在v-for中操作执行一个写好的函数。

		<div id="app">
            <ul v-for="innums in nums">
               <li v-for="i in nextnums(innums)">
                   {{i}}
               </li> 
            </ul>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    nums:[[1,2,3,4,5,6],[11,12,13,14,15,16,17]]
                },
                methods:{
                    nextnums:function(innums){
                        return innums.filter((item) => {
                            return item%2===0;
                        })
                    }
                }
            })
        </script>

这里补充一下，v-for：“ i in 10”这里的in后面可以可以接整数，带来的效果就是这个标签包裹的程序会执行的次数。

类似于 v-if，你也可以利用带有 v-for 的 <template> 来循环渲染一段包含多个元素的内容。