VUE3.0-列表渲染

Zman7772024-05-24 9:25

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，

其中 items 是源数据的数组，而 item 是迭代项的别名

javascript 复制代码

<template>
  <h3>列表渲染</h3>
<p v-for="item in names">{{ item }}</p>
</template>

<script>
export default {
    data() {
        return{
            names:[
                '李德华','张学友','周杰伦','林俊杰'
            ]
        }
    }
} 

</script>

复杂数据

大多数情况，我们渲染的数据源来源于网络请求，也就是 JSON 格式

javascript 复制代码

<template>
  <h3>列表渲染</h3>
    <div v-for="item in result">
    <p>{{ item.title }}</p>
    <img :src="item.avator" alt="">
</div>
</template>

<script>
export default {
    data() {
        return{
            result:[
                {
                    "id":2261677,
                    "title": "鄂尔多斯|感受一座城市的璀璨夜景 感受一座城市，除了白日里的车水马龙，喧器繁华之",
                    "avator":"https://pic.qyer.com/avatar/002/25/77/30/200?V=1560226451",
                },
                {
                    "id":2261566,
                    "title": "成都这家洞穴暗黑风咖啡厅酷毙了！早c晚A走起＞成都天气这么热。咖啡*人必",
                    "avator": "https://pic.ever.com/avatar/e11/87/89/69/zcerx-4537218313e",
                },
                {
                    "id":2261662,
                    "title":"川西新龙-措卡湖】措卡湖，意为"乱石从中的黑色海水"，神秘小众 原汁原味。深",
                    "avator":"https://pic.qyer.com/avatar/009/88/48/58/200?V=1507386782",
                },
                ]
    }
} 
}
</script>

v-for 也支持使用可选的第二个参数表示当前项的位置索引

javascript 复制代码

<template>
  <h3>列表渲染</h3>
<p v-for="(name, index) in names">{{ name }}-{{ index }}</p>

</template>

<script>
export default {
    data() {
        return{
            names:['李德华','张学友','周杰伦','林俊杰'],

</script>

你也可以使用of作为分隔符来替代in，这更接近 JavaScript 的迭代器语法

javascript 复制代码

<p v-for="(name, index) of names">{{ name }}-{{ index }}</p>

v-for与对象

你也可以使用 v-for 来遍历一个对象的所有属性

javascript 复制代码

<template>
  <h3>列表渲染</h3>
    <p v-for="(value,key,index) in userInfo">{{ value }}-{{ key }}-{{ index }}</p>
</div>
</template>

<script>
export default {
    data() {
        return{
                userInfo:{
                    name:'zhansgan',
                    age:25,
                    sex:'男',
                }
    }
} 
}
</script>