1. v-for指令
可以遍历字符串，数组，对象，对象数组等
2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>循环与if指令
</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="str in arr">
<span>{{str}}
</span>
</li>
</ul>
<hr/>
<ul>
<li v-for="str in item">
<span>{{str}}
</span>
</li>
</ul>
<hr/>
<ul>
<li v-for="(item,index) in list">
<span @click="print(item.name)">{{item.name}}============={{index}}
</span>
</li>
</ul>
<hr/>
<ul>
<li v-for="(v,k,count) in user">
<span>{{v}}======{{k}}======{{count}}
</span>
</li>
</ul>
<div v-if="type=='A'">A
</div>
<div v-else-if="type=='B'">B
</div>
<div v-else>not
</div>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
arr:"南京,上海,苏州,镇江,扬州".split(","),
list:[
{
name:"a1",
age:10
},{
name:"a2",
age:20
},{
name:"a3",
age:30
}
],
user:{
name:"tom",
age:100
},
item:"abcde",
type:"Aa"
},
methods:{
print:function(arg){
console.log(arg);
}
}
});
</script>
</html>
3. 运行结果
