Vue中v-for的例子

芋圆社区 > 编程 > Vue > Vue中v-for的例子

313

2021-06-20

2022-05-17

Hey 、小怪兽

• v-for是根据数据生成列表结构，常常和数组结合使用
• 语法为(xxx,index) in 数据，有点像Django里面的for
• index就是前面的序列，默认从0开始，如果要从1开始就{{ index+1 }}
• <template></template>可以避免太多的Dom元素，如果改成<div>的话，就每次遍历都会多一个<div>
• 想要获得key和val可以用两个v-for，但是要注意是(val,key) in 数据，不过像例子中用{{ user.name }}也是可以的
~~• 官方文档不推荐在同一元素用v-if和v-for，因为v-if的优先度高~~
• 官方文档不推荐在同一元素用v-if和v-for，在Vue2.x版本里v-for优先度高，在Vue3.x版本里，v-if优先度高（修改：有猫的茶水间 2021-6-20）

<body>
    <div id="vue-app">
        <h1>v-if 条件</h1>
        <!-- 遍历数组 -->
        <ul>
            <li v-for="food in foods">
                {{ food }}
            </li>
        </ul>

        <ul>
            <li v-for="(user,index) in users">
                {{ index+1 }}. {{ user.name }} : {{ user.age }}岁
            </li>
        </ul>

        <template v-for="(user,index) in users">
            <h1>{{ index+1 }}. {{ user.name }}</h1>
            <p>Age:{{ user.age }}岁</p>
        </template>

        <template v-for="(user,index) in users">
            <div v-for="(val,key) in user">
                <p>{{ key }} - {{ val }}</p>
            </div>
        </template>
    </div>
</body>

new Vue({
    el: "#vue-app",
    data: {
        foods: ["apple", "banana", "candy"],
        users: [
            { name: "Joe", age: 20 },
            { name: "Mark", age: 15 },
            { name: "York", age: 30 },
        ]
    },
})

下一篇：Vue组件例子

Message Board

有猫的茶水间农民 已采用

1900年1月20日 02:43

这里的 v-if 和 v-for 优先级需要明确一下 vue 的版本吧，2.x 是 v-for 更高，3.x 是 v-if 更高

Vue中v-for的例子

Comment

Message Board