基本列表
<!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>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- 便利数组 -->
<h2>人员列表(用的多)</h2>
<ul>
<li v-for="(p,index) of persons" :key='p.id'>
<!-- <li v-for="p in persons" :key='p.id'> -->
{{p.name}}-{{p.age}}
</li>
</ul>
<!-- 便利对象 -->
<h2>汽车信息</h2>
<ul>
<li v-for="(value,k) of car" :key='k'>
{{k}}-{{value}}
</li>
</ul>
<!-- 便利字符串 -->
<h2>字符串信息(用的少)</h2>
<ul>
<li v-for="(char,index) of str" :key='index'>
{{char}}-{{index}}
</li>
</ul>
<!-- 便利指定次数 -->
<h2>便利指定次数(用的少)</h2>
<ul>
<li v-for="(number,index) of 9" :key='index'>
{{index}}-{{number}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'凤凰',age:16},
{id:'002',name:'凤1',age:11},
{id:'003',name:'凤2',age:19}
],
car:{
name:'奥迪',
jiag:'70万',
color:'黑色'
},
str:'hello'
}
})
</script>
</body>
</html>
v-for指令:
1,用于展示列表数据
2,语法:v-for='(item,index) in xxx' :key='yyy'
3,可便利:数组(用的最多)、对象、字符串(用的很少)、指定次数(用的很少)