64 lines
1.7 KiB
HTML
64 lines
1.7 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Document</title>
|
|||
|
|
<script type="text/javascript" src="../js/vue.js"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!--
|
|||
|
|
v-for指令：
|
|||
|
|
1.用于展示列表数据
|
|||
|
|
2.语法：v-for="(item, index) in xxx" :key="yyy"
|
|||
|
|
3.可遍历: 数组, 对象, 字符串(用的很少), 指定次数(用的很少)
|
|||
|
|
-->
|
|||
|
|
<div id="root">
|
|||
|
|
<!-- 遍历数组 -->
|
|||
|
|
<ul>
|
|||
|
|
<li v-for="p in persons" :key="p.id">{{p.name}}-{{p.age}}</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li v-for="(p,index) in persons" :key="p.id">{{p}}-{{index}}</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<!-- 遍历对象 -->
|
|||
|
|
<ul>
|
|||
|
|
<li v-for="(value,key) in book" :key="key">{{value}}-{{key}}</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<!-- 遍历字符串 -->
|
|||
|
|
<ul>
|
|||
|
|
<li v-for="(char,index) in str" :key="index">{{char}}-{{index}}</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<!-- 遍历指定次数 -->
|
|||
|
|
<ul>
|
|||
|
|
<li v-for="(num,index) in 10" :key="index">{{num}}-{{index}}</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
Vue.config.productionTip = false
|
|||
|
|
|
|||
|
|
const vm = new Vue({
|
|||
|
|
el:'#root',
|
|||
|
|
data:{
|
|||
|
|
persons:[
|
|||
|
|
{id:'001',name:'张钧',age:33},
|
|||
|
|
{id:'002',name:'温柔',age:23},
|
|||
|
|
{id:'003',name:'桃梨',age:24},
|
|||
|
|
{id:'004',name:'琪妙',age:35},
|
|||
|
|
],
|
|||
|
|
book:{
|
|||
|
|
name:'死亡赌局',
|
|||
|
|
count:123124,
|
|||
|
|
date:'2023-06-14'
|
|||
|
|
},
|
|||
|
|
str:'thisisabook'
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
</html>
|