vue学习笔记-3v-for

列表渲染

v-for

item in items

我们可以使用v-for指令基于一个数组来渲染一个列表。v-for指令的值需要使用item in items形式的特殊语法，其中items是源数据的数组，而item是迭代项的别名，所以item值非固定可修改

<template>
    <p3>列表渲染</p3>
    <p v-for="item in names">{{ item }}</p>
</template>
<script>
export default{
    data(){
        return{
            names:["富必达","金菲士","汤力水"],
          }
        }
    }
}
</script>

复杂数据

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

<template>
    <p3>列表渲染</p3>
    <div v-for="item in result">
        <p>{{ item.title }}</p>
        <img :src="item.avator" alt="">
    </div>
</template>
<script>
export default{
    data(){
        return{
            result:[{
                "id": 12222,
                "title":"bilibili",
                "avator":"https://www.bilibili.com/", 
            } , 
            {             
                "id": 12233,
                "title":"baidu",
                "avator":"https://www.baidu.com/",
            },
            {
                "id": 12244,
                "title":"dy",
                "avator":"https://aka.ms/AnaheimRW/ad6-douyin-cid76-pid2/nov23",
            },
          ]
        }
    }
}
</script>

在CSS中，id属性用于指向样式表中的特定样式声明，而在JavaScript中，id可用于访问和操作拥有特定ID的元素。所有标签都有id值；id属性值类似于身份证号码，在一个页面中是唯一的值，不可重复；一个标签上只能有一个id属性值；一个id属性值，只能选择一个标签
原文链接：https://blog.youkuaiyun.com/z2768557792/article/details/129333134

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

<template>
    <div>
        <p v-for="(item,index) in names">{{ item }}-{{ index }}</p>
    </div>
</template>
<script>
export default{
    data(){
        return{
            names:["富必达","金菲士","汤力水"],
        }
    }
}
</script>

item of items 

of可以作为分隔符替代in,更接近JavaScript的迭代器语法

<div v-for="item of itemss"></div>

v-for与对象

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

<template>
    <div>
        <p v-for="(value,key,index) of userInfo">{{ value }}-{{ key }}-{{ index }}</p>
    </div>
</template>
<script>
export default{
    data(){
        return{
          userInfo:{
            name:"iwen",
            age:20,
            sex:"male"
          }
        }
    }
}
</script>