1. 循环结构
- v-for 遍历对象
<div v-for ='(value,key,index) in object'></div>
- v-if 和 v-for 结合使用
<div v-if='value==12' v-for ='(value,key,index) in object'></div>
# v-for 遍历对象:
<html lang="zh">
<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></title>
</head>
<body>
<div id="app">
<ul>
<!-- 普通遍历 -->
<li v-for="item in fruits">{{item}}</li>
<!-- 索引遍历 -->
<li v-for='(item,index) in fruits'>{{item + '---' + index}}</li>
<!-- 带样式***的遍历 -->
<li :key='item.id' v-for="(item,index) in myFruits">
<span>{{item.ename}}</span>
<span>******</span>
<span>{{item.cname}}</span>
</ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
fruits:['apple','orange','banana'],
myFruits:[{
ename: 'apple',
cname: '苹果'
},{
ename: 'orange',
cname: '橘子'
},{
ename: 'banana',
cname: '香蕉'
}]
},
methods: {
handle: function() {
// this.objStyles.width = '100px';
}
}
});
</script>
</body>
</html>
v-if 和 v-for 结合使用:
<body>
<div id="app">
<div v-if="v == 13" v-for="(v,k,i) in obj">{{v + '---' + k + '---' + i}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var obj = {
uname: 'lisi',
age: 13,
gender: 'male'
}
for (var key in obj) {
console.log(key, obj[key])
}
var vm = new Vue({
el: '#app',
data: {
obj: {
uname: 'zhangsan',
age: 13,
gender: 'female'
}
},
methods: {
handle: function() {
}
}
});
</script>
</body>
此时结果显示 :