VUE：v-for：遍历数组对象
代码：遍历数组对象{{item}}英文：{{item.ename}}中文：{{item.cname}}索引：{{ind...
·
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遍历数组对象</title>
</head>
<body>
<div id="app">
<ul>
<!--遍历数组-->
<li v-for='item in color'> {{item}} </li>
<li :key='item.id' v-for='(item,index) in myColors'>
<span>英文：{{item.ename}}</span>
<br>
<span>中文：{{item.cname}}</span>
<br>
<span>索引：{{index}}</span> </li>
<!--遍历对象-->
<li v-for='(v,k,i) in obj'> {{"属性值:" +v+'--'+ " 键值:" +k+'--'+ " 索引:" +i}} </li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
color:['red','blue','yellow' ],
myColors:[{
id:1,
ename:'red',
cname:'红色'
},{
id:2,
ename:'blue',
cname:'蓝色'
}, {
id:3,
ename:'yellow',
cname:'黄色'
}
],
obj:{
name:'tom',
gender:'男'
}
}
});
</script>
</body>
</html>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)