vue中动态添加class类进行显示隐藏

< div class= "status_button" >

< el-button type= "success" @click=" checkSite" >查岗 </ el-button >

< el-button type= "danger" >视频 </ el-button >

</ div >

<!-- 查岗部分显示影藏 -->

< div class= "check_button" :class="[ this. flag? 'show': 'hidden']" >

< ul class= "cl" >

< li >用xinhic </ li >

< li >xin231 </ li >

</ ul >

</ div >

通过点击按钮进行显示隐藏

data() {

return {

flag: false,

}

},

methods: {

getdata() {

this. $axios. post( 'http://yapi.xxxxxxx'). then( res => {

console. log( res)

})

},

checkSite() {

this. flag = ! this. flag

}

}

三元表达式需要写在数组中 点击按钮的时候需要改变flag的状态  这里的flag相当于一个开关