在vue中動(dòng)態(tài)添加class類進(jìn)行顯示隱藏實(shí)例
更新時(shí)間：2019年11月09日 09:51:26 作者：樹沙&
今天小編就為大家分享一篇在vue中動(dòng)態(tài)添加class類進(jìn)行顯示隱藏實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
<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>
通過點(diǎn)擊按鈕進(jìn)行顯示隱藏
data() {
return {
flag: false,
}
},
methods: {
getdata() {
this.$axios.post('http://yapi.xxxxxxx').then( res => {
console.log(res)
})
},
checkSite() {
this.flag = !this.flag
}
}
三元表達(dá)式需要寫在數(shù)組中 點(diǎn)擊按鈕的時(shí)候需要改變flag的狀態(tài) 這里的flag相當(dāng)于一個(gè)開關(guān)
以上這篇在vue中動(dòng)態(tài)添加class類進(jìn)行顯示隱藏實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在前端開發(fā)中,卡片遮罩層是一種常見的交互設(shè)計(jì)元素,用于強(qiáng)調(diào)某個(gè)區(qū)域或內(nèi)容,并提供用戶操作的入口,本文將帶大家在?vue?中結(jié)合實(shí)際案例實(shí)現(xiàn)此功能,感興趣的朋友一起看看吧2024-08-08
下面小編就為大家分享一篇解決vue+webpack打包路徑的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue中的插槽，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-10-10
表格Table實(shí)現(xiàn)前端全選所有功能方案示例(包含非當(dāng)前頁)
這篇文章主要為大家介紹了表格Table實(shí)現(xiàn)前端全選所有功能,包括非當(dāng)前頁的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2024-02-02
最近項(xiàng)目中有用到j(luò)son編輯器,我選用了這款vue的編輯器,看起來也是比較簡潔,接下來就具體介紹一下它,下面這篇文章主要給大家介紹了關(guān)于VUE3使用JSON編輯器的詳細(xì)圖文教程,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue中強(qiáng)制組件重新渲染的正確方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
vue-types 在 Vue 3 中的使用主要適用于希望進(jìn)行更細(xì)致的 prop 驗(yàn)證的場景,尤其是在 JavaScript 項(xiàng)目中,這篇文章給大家介紹vue3中如何使用vue-types,感興趣的朋友跟隨小編一起看看吧2024-04-04
require.js 加載 vue組件 r.js 合并壓縮的實(shí)例
這篇文章主要介紹了require.js 加載 vue組件 r.js 合并壓縮的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
在 Vue 中，一些簡單的功能，我們可以直接定義為全局方法，然后掛到 Vue 上就能使用了，這篇文章主要介紹了Vue3?中自定義插件的實(shí)現(xiàn),需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue使用Font Awesome的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02