vue中使用v-if,v-else來設(shè)置css樣式的步驟
推薦閱讀：
我們?cè)谑褂胿ue項(xiàng)目開發(fā)時(shí)，v-if是使用的非常多的，在這里我們談?wù)勅绾问褂胿-i來綁定修改css樣式，使用的主要是雙向數(shù)據(jù)綁定，即通過改變他的狀態(tài)來改變他的樣式，來個(gè)實(shí)例說明下：
第一步：
主要使用的是三元判斷的方式（需要改變的div里使用），并設(shè)置好點(diǎn)擊事件
狀態(tài)？“第一個(gè)class名”：“第二個(gè)class名”
第二步：
在javascript部分，設(shè)置默認(rèn)屬性,設(shè)置點(diǎn)擊事件
quxiaoTit:true
第三步：
在css部分設(shè)置它的改變前樣式和改變后樣式
我這里是使用的定位，改變他先后的定位的不同
到此這篇關(guān)于vue中如何使用v-if,v-else來設(shè)置css樣式的文章就介紹到這了,更多相關(guān)vue 使用v-if,v-else設(shè)置css樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue中自定義右鍵菜單插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
我們正常在開發(fā)項(xiàng)目中,表格的風(fēng)格是一致的,但是表格或多或少會(huì)有些不同,有些是需要分頁,有些是按鈕功能不同,有些又需要加Tag,或者對(duì)時(shí)間進(jìn)行格式化等,這篇文章主要介紹了elementPlus表格二次封裝過程,需要的朋友可以參考下2024-07-07
Vue MVVM模型與data及methods屬性超詳細(xì)講解
MVVM旨在利用WPF中的數(shù)據(jù)綁定函數(shù),通過從視圖層中幾乎刪除所有GUI代碼（代碼隱藏）,更好地促進(jìn)視圖層開發(fā)與模式其余部分的分離,這篇文章主要介紹了Vue MVVM模型與data及methods屬性2022-10-10
VUE利用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能實(shí)例
本篇文章主要介紹了VUE利用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要給大家分享的是Vue3的幾個(gè)優(yōu)勢(shì)，Vue3仍然在源碼、性能和語法 API 三個(gè)大的方面進(jìn)行了優(yōu)化，下面我們一起進(jìn)入文章看看具體詳情吧2021-10-10
解決echarts 一條柱狀圖顯示兩個(gè)值,類似進(jìn)度條的問題
這篇文章主要介紹了解決echarts 一條柱狀圖顯示兩個(gè)值,類似進(jìn)度條的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
VUE3+Element-plus中el-form的使用示例代碼
這篇文章主要介紹了VUE3+Element-plus中el-form的使用示例代碼,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
Vue如何用this.$set改變數(shù)組里的某個(gè)值
這篇文章主要介紹了Vue用this.$set改變數(shù)組里的某個(gè)值,文中通過示例代碼介紹了vue中this.$set()的用法----更新數(shù)組和對(duì)象的值，需要的朋友可以參考下2022-12-12
Vue+Element?UI實(shí)現(xiàn)復(fù)制當(dāng)前行數(shù)據(jù)的功能
這篇文章主要介紹了如何使用Vue?+?Element?UI?實(shí)現(xiàn)在列表的操作欄新增一個(gè)復(fù)制按鈕,復(fù)制當(dāng)前行的數(shù)據(jù)可以打開新增彈窗后亦可以跳轉(zhuǎn)到新增頁面,感興趣的小伙伴可以參考下2023-11-11
本篇文章主要介紹了詳解Vue應(yīng)用部署到服務(wù)器的正確方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-07-07