vue實現(xiàn)樣式之間的切換及vue動態(tài)樣式的實現(xiàn)方法
更新時間：2017年12月19日 16:42:02 投稿：mrr
這篇文章主要介紹了vue中如何實現(xiàn)樣式之間的切換及vue動態(tài)樣式的實現(xiàn)方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價值,需要的朋友可以參考下
前言
既然我們選擇了vue，那么在做東西時就不要想著去操作dom，所有的都交給vue來解決。
下面來說一個很簡單但是很常用的效果，可能人人都會用到這樣的需求
請看下圖
導(dǎo)航欄的樣式切換功能，如果我們使用jquery之類的東西來寫，可能要寫好多代碼，那么我們用vue呢，
代碼如下
html
附上vue中style與class綁定API
<div id="wrap" class="box">
<div v-for="(list,index) in navLists" class="nav" :class="{ red:changeRed == index}" @click="reds(index)">{{list.text}}</div>
</div>
css
*{
padding: 0;margin: 0;
}
.box{
height: 40px;
background: cyan;
}
.nav{
line-height: 40px;
display: inline-block;
margin-left: 100px;
cursor: pointer;
}
.red{
color: red;
}
//前提是必須引入vuejs哦！
var vm = new Vue({
el:"#wrap",
data:{
navLists:[
{
"text":"首頁"
},
{
"text":"組件"
},
{
"text":"API"
},
{
"text":"我們"
}
],
changeRed:0
},
methods:{
reds:function(index){
this.changeRed = index;
}
}
});
仔細(xì)看看我們的js代碼除了模擬的數(shù)據(jù)其實就只有一個簡單的邏輯處理，比起之前的各種操作dom省了好多事。
ps:vue 動態(tài)樣式的解決方法
:class="{active: isActive}"
這個就沒什么好說的了,但是在類名有'-'號的時候回報錯，
還有一種
class="[lineStyle(courseClick)]"
lineStyle(isClick){
if (isClick===true){
return 'tab-items-current'
}else {
return 'class-tab-items'
}
}
總結(jié)
以上所述是小編給大家介紹的vue實現(xiàn)樣式之間的切換及vue動態(tài)樣式的實現(xiàn)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue.js 父向子組件傳參的實例代碼,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了Vue element-ui父組件控制子組件的表單校驗操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vscode搭建vue環(huán)境完整圖文教程(適合新手小白)
Vue框架的優(yōu)秀設(shè)計和強(qiáng)大的生態(tài)系統(tǒng)成為了越來越多開發(fā)者選擇Vue的原因,在實際項目過程中一個高效的開發(fā)環(huán)境能夠大大提高開發(fā)效率,這篇文章主要給大家介紹了關(guān)于vscode搭建vue環(huán)境的相關(guān)資料,需要的朋友可以參考下2023-10-10
vue攔截器實現(xiàn)統(tǒng)一token,并兼容IE9驗證功能
這篇文章主要介紹了vue攔截器實現(xiàn)統(tǒng)一token,并兼容IE9驗證功能，本文通過實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-04-04
這篇文章主要介紹了基于vue實現(xiàn)探探滑動組件功能,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
vite-plugin-svg-icons是一個Vite插件,其作用是將SVG圖標(biāo)文件轉(zhuǎn)換為Vue組件,本文主要介紹了vue3+vite項目中顯示SVG圖片的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2024-02-02
vue 監(jiān)聽input輸入事件(oninput)的示例代碼支持模糊查詢
這篇文章主要介紹了vue 監(jiān)聽input輸入事件(oninput)支持模糊查詢,比如說表格模糊查詢，實現(xiàn)一邊輸入，一邊過濾數(shù)據(jù)，本文通過示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-02-02
如何在 Vite 項目中自動為每個 Vue 文件導(dǎo)入 base.les
在Vite配置中通過添加css.preprocessorOptions實現(xiàn)自動導(dǎo)入base.less,簡化Vue組件的樣式設(shè)置,提高代碼的可維護(hù)性,感興趣的朋友跟隨小編一起看看吧2024-09-09
這篇文章主要介紹了安裝多版本Vue-CLI的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了Vue 指令實現(xiàn)拖拽功能,實現(xiàn)原理很簡單，文中通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-10-10