Vue3中的列表渲染v-for基本用法
原创
Vue3中的列表渲染v-for基本用法
原创
软件架构师Michael
发布于 2022-09-07 22:23:43
发布于 2022-09-07 22:23:43
tips:
- Vue3中，v-for可以用来循环渲染数据内容
- v-for指令的基本写法 v-for="变量名 in data数据"
- 对json格式的数据进行循环时，可以用{value，key}方式遍历出所有数据
- v-for循环如果要获取index值，在非json格式，是第二个参数，json格式中为第三个参数
example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/vue@3"></script>
<title>Document</title>
</head>
<body>
<div id="michael">
<div v-for="p in arr">
{{p}}
</div>
<div v-for="mm in string">
{{mm}}
</div>
<div v-for="(value,key,index) in json"> <!--json格式中第一个变量输出的是值，第二个变量对应的是键，第三个变量对应的是索引值--->
{{key}}:{{value}}{{index}}
</div>
</div>
<script>
Vue.createApp({
data(){
return {
"arr":['sky','blue','lake'],
"string":"hello,Vue3.",
"json":{
"sky":"nice",
"blue":"cool",
"lake":"quiet"
}
}
},
'methods':{
}
}).mount('#michael');
</script>
</body>
</html>输入结果为：
v-for的循环结果
【小结】
不积跬步无以至千里，不积小流无以成江海
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
