Vue的基本组件3.2(v-for)
Vue的基本组件3.2(v-for)
GeekLiHua
发布于 2025-01-21 04:23:56
发布于 2025-01-21 04:23:56
代码可运行
运行总次数：0
代码可运行
简介：本文旨在用最短的篇幅和例子，代入大家入门vue,也是本博主的一个学习记录，本文主要介绍的组件有，v-for。
v-for
功能：该指令可以遍历对象的属性，或者列表。
学习代码1：
<!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">
<title>v-for</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<span v-for="(value, key, index) in person">
<!-- index是v-for内置的一个属性，从0开始 -->
<!-- 然后js，key，value就是js中类的键值对 -->
索引：{{index}} -- 键:{{key}} -- 值: {{value}} <br>
</span>
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
person:{
name:"小陈",
age:20
},
city:["武汉", "杭州", "合肥"],
persons:[
{id:"1", name:"小陈", age:20, city:"武汉"},
{id:"2", name:"小王", age:20, city:"杭州"},
{id:"3", name:"小张", age:20, city:"合肥"},
]
},
methods:{
}
});
</script>
</html>运行结果：
学习代码2：
<!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">
<title>v-for</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<span v-for="(value,key) in person">
<!-- 如果不写的话，最后索引是没有具体数值的 -->
索引：{{index}} -- 键：{{key}} -- 值： {{value}} <br>
</span>
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
person:{
name:"小陈",
age:20
},
city:["武汉", "杭州", "合肥"],
persons:[
{id:"1", name:"小陈", age:20, city:"武汉"},
{id:"2", name:"小王", age:20, city:"杭州"},
{id:"3", name:"小张", age:20, city:"合肥"},
]
},
methods:{
}
});
</script>
</html>运行结果：
学习代码3：
<!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">
<title>v-for</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- :key是自定义键 -->
<!-- 这里是将索引设置为key -->
<ul v-for="(item, index) in city" :key="index">
<li> 索引：{{index}} -- 元素：{{item}}</li>
</ul>
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
person:{
name:"小陈",
age:20
},
city:["武汉", "杭州", "合肥"],
persons:[
{id:"1", name:"小陈", age:20, city:"武汉"},
{id:"2", name:"小王", age:20, city:"杭州"},
{id:"3", name:"小张", age:20, city:"合肥"},
]
},
methods:{
}
});
</script>
</html>运行结果：
学习代码4：
<!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">
<title>v-for</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 对于多重类的遍历方式 -->
<div v-for="(person,index) in persons" :key="person.id">
索引：{{index}} -- {{person.name}} {{person.age}}
{{person.city}}
</div>
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
person:{
name:"小陈",
age:20
},
city:["武汉", "杭州", "合肥"],
persons:[
{id:"1", name:"小陈", age:20, city:"武汉"},
{id:"2", name:"小王", age:20, city:"杭州"},
{id:"3", name:"小张", age:20, city:"合肥"},
]
},
methods:{
}
});
</script>
</html>运行结果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-10-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
