我的书签
添加书签
移除书签源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>基本列表</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">
<!-- 遍历数组 ★★★-->
<h2>人员列表（遍历数组）</h2>
<ul>
<!-- 使用方法： 你想生成多个谁，就在谁身上增加 v-for="(元素,索引值) of 属性数组/对象/字符串/次数",那么属性数组有多少个元素，就会在此处生成多少个li标签 -->
<!-- 遍历数组时， v-for(元素,index) of 数组 ,其中 index是数组中的默认索引值-->
<li v-for="(p,index) of persons" :key="index">
<!-- 从 p项 中拿出 属性数组元素对应的key-->
{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 遍历对象 -->
<h2>汽车信息（遍历对象）</h2>
<ul>
<!-- 遍历对象时， v-for(值,key) of 对象-->
<li v-for="(value,k) of car" :key="k">
{{k}}-{{value}}
</li>
</ul>
<!-- 遍历字符串 -->
<h2>测试遍历字符串（用得少）</h2>
<ul>
<!-- 遍历字符串时， v-for(字符,索引值) of 字符串-->
<li v-for="(char,index) of str" :key="index">
{{char}}-{{index}}
</li>
</ul>
<!-- 遍历指定次数 -->
<h2>测试遍历指定次数（用得少）</h2>
<ul>
<!-- 遍历指定次数时， v-for(数字,索引值) of 次数-->
<li v-for="(number,index) of 5" :key="index">
{{index}}-{{number}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
//数组
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
//对象
car:{
name:'奥迪A8',
price:'70万',
color:'黑色'
},
//字符串
str:'hello'
}
})
</script>
</html>