vue v-for数组倒序

<div id="app">  
    <ul>  
        <template v-for="i in items">  
            <li>Index is {
   
   {$index}}</li>  
            <li>Content is {
   
   {i}}</li>  
        </template>  
    </ul>  
</div>  
<script>  
    var vm = new Vue({  
        el: '#app',  
        data: {  
            items: {  
                a: "1",  
                b: "2",  
                c: "3"  
            }  
        }  
    })  
</script> 

监视数组变动(修改数组)
 

当data的某个属性是一个数组时,用v-for可以遍历,但显然数组是可能变动的,因此对以下变动也进行数据绑定;

push()         数组末尾添加

pop()           数组末尾取出

shift()          数组开头取出

unshift()      数组开头添加

splice()        删除并插入

sort()           排序

reverse()     数组顺序颠倒

当利用以上方法变更数组时,被渲染的内容会实时更新;

采用reverse() 实现数组倒序排列

猜你喜欢

转载自blog.csdn.net/weixin_42132841/article/details/125207067