vue-day15--列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>列表渲染</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!--
v-for 指令
1.用于展示列表数据
2.语法 v-for="(item,index) in xxx" :key="index"
3.可以遍历 数组 对象 字符串（比较少） 指定次数（比较少）
-->
<h2>人员列表遍历数组</h2>
<ul>
<!--第一种写法-->
<!-- <li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li> -->
<!--第二种写法-->
<li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}</li>
</ul>
<h1>汽车信息遍历对象</h1>

<ul>
<li v-for="(value,k) in car" :key="k">{{k}}-{{value}}</li>
</ul>

<h1>遍历字符串</h1>

<ul>
<li v-for="(char,index) in str" :key="index">{{char}}-{{index}}</li>
</ul>

<h1>遍历指定次数</h1>

<ul>
<li v-for="(number,index) in 5" :key="index">{{number}}-{{index}}</li>
</ul>
</div>
</body>

<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
name: "尚硅谷",
persons: [
{ id: "001", name: "张三", age: 18 },
{ id: "002", name: "lisi", age: 48 },
{ id: "003", name: "wangwu", age: 38 },
],
str: "hello",

car: {
name: "哈弗",
price: "16万",
color: "red",
},
},
});
</script>
</html>
posted @ 2023-07-10 23:50  雪落无痕1  阅读(13)  评论(0)    收藏  举报