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