Vue-Vue列表渲染v-for

最新推荐文章于 2025-01-09 10:51:09 发布

原创最新推荐文章于 2025-01-09 10:51:09 发布 · 189 阅读

CC 4.0 BY-SA版权

11 篇文章

订阅专栏

本文详细介绍了Vue.js框架中v-for指令的使用方法，包括如何通过v-for循环遍历数组和对象，并展示了如何利用索引和键名增强循环功能。此外，还提供了更新数组以实时反映到页面上的三种有效策略。

一、v-for 循环数组

HTML代码

<div id="app">
    <ul>
        <li  v-for='item in list'>{{item}}</li>
    </ul>
</div>

JS代码

new Vue({
    el:'#app',
    data:{
        list:[
            'red',
            'green',
            'blue'
        ]
    }
})

可以提供第二个参数为索引

HTML代码

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

二、v-for 循环迭代对象属性值

HTML代码

<div id="app">
    <ul>
        <li  v-for='value in obj'>{{value}}</li>
    </ul>
</div>

JS代码

new Vue({
    el:'#app',
    data:{
        obj:{
            name:'lizhao',
            sex:'nv',
            age:'23'
        }
    }
})

可以提供第二个的参数为键名；第三个参数为索引；

HTML代码

<div id="app">
    <ul>
        <li  v-for='(value, key,index) in obj'>{{index}}:{{key}}-{{value}}</li>
    </ul>
</div>

　　想数组改变，对应页面也改变，不能用下标的方法操作数组。　

　　1、可以用数组变异方法：pop(删除最后一个）、 shift（删除第一个）、 push（数组最后加）、unshift(数组第一项前加）、splice（截取数组）、 sort（排序）、reverse(数组取翻）。

　　2、可以改变引用:

　　3、用set方法。