v-bind 三元：<h2 :class="off ? 'red':'green'">三元表達式</h2>
<style>
.red{
background: red;
}
#app div{
display: none;
}
</style>
<body>
<div id="app">
<input v-for="(item,i) in list"
type="button"
v-bind:value="item.title"
v-bind:class="{red:i===index}"
v-on:click ="tabHandle(i)"
>
<div
v-for="(item,j) in list"
v-bind:style="{display:j === index? 'block':'none'}" >
<p v-for="option in item.list">
{{option.subTitle}}
</p>
</div>
</div>
<script type="text/javascript">
/*可控class樣式
v-bind:class="{class名字:表達式}"
表達式爲true就添加class,爲false就忽略
控制style
v-bind:style="{樣式名:'樣式值'}" 必須是字符串形式
vue的事件：
語法：v-on:事件名 = "事件處理函數(參數)"
需要傳參
*/
let list = [
{
title:'按鈕1',
list:[
{
subTitle:'1'
},
{
subTitle:'1'
},
{
subTitle:'1'
}
]
},
{
title:'按鈕2',
list:[
{
subTitle:'2'
},
{
subTitle:'2'
},
{
subTitle:'2'
}
]
},
{
title:'按鈕1',
list:[
{
subTitle:'3'
},
{
subTitle:'3'
},
{
subTitle:'3'
}
]
}
]
let vm = new Vue({
el:'#app',
data:{
list,
index:0 //控制顯示
},
methods:{
tabHandle(i){
this.index = i;
}
}
})
</script>
</body>