<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
}
ul{
width: 606px;
height: 225px;
border: 1px solid #000000;
}
li{
list-style: none;
border: 1px solid #000000;
width: 200px;
float: left;
text-align: center;
}
p{
width: 200px;
height: 120px;
border: 1px solid #000000;
padding-top: 80px;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="w,index) in obj" v-on:click="num(index)">{{w.num}}
<p v-show="w.flag">{{w.title}}</p>
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
obj:[
{num:'王诺岚', flag:true, 'title':'是小仙女'},
{num:'杨梦娇', flag:false, 'title':'是小黑子'},
{num:'张春华', flag:false, 'title':'小白痴'}
]
},
methods:{
num:function(index){
for(var i=0;i<this.obj.length;i++){
this.obj[i].flag=false;
}
this.obj[index].flag=true;
}
}
})
</script>
</body>
</html>
网友评论