vue 选项卡

来源：互联网发布：ipad加入网络密码错误编辑：程序博客网时间：2024/05/18 20:13

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>


<script src="js/vue.js"></script>
<style type="">
.on{
background: #ccc
}
.display{
display:block;
}
</style>
<script type="text/javascript">
window.onload=function(){

Vue.component('change',{
template:"#change",
props:{
name:Array,
Data:Array
},
data:function(){
return{
onname:''
}

},
computed:{
on:function(item){
console.log(item)
}
},
methods:{
toggle:function(item,index){
// console.log(item.name)
this.onname = item.name
item.show = !item.show
console.log(this.onname)

}
},

})

var dome=new Vue({
el:".main",
data:{

changeData:[

{ name: '第一', con: "第一内容" ,show:true },
{ name: '第二', con: "第二内容" ,show:false }
]


}
})

}
</script>
<script type="text/x-template" id="change">
<div >
<ul>
<li
v-for="top in Data"
@click="toggle(top,$index)"
:class="{'on':onname == top.name}"
>
{{top.name}}
</li>
</ul>

<div v-for="top in Data" v-if="top.name==onname">
{{top.con}}
</div>
</div>
</script>
</head>

<body>
<div class="main" >
<change
:data="changeData"
>
</change>
</div>
</body>
</html>

0 0