<!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/jquery-1.7.2.min.js"></script> -->
<script src="js/vue.js"></script>
<style type="">
.on{
background: #ccc
}
.display{
display:block;
}
</style>
<script type="text/javascript">
window.οnlοad=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>
<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/jquery-1.7.2.min.js"></script> -->
<script src="js/vue.js"></script>
<style type="">
.on{
background: #ccc
}
.display{
display:block;
}
</style>
<script type="text/javascript">
window.οnlοad=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>