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> |