vue實(shí)現(xiàn)樣式之間的切換及vue動(dòng)態(tài)樣式的實(shí)現(xiàn)方法
前言
既然我們選擇了vue，那么在做東西時(shí)就不要想著去操作dom，所有的都交給vue來(lái)解決。
下面來(lái)說(shuō)一個(gè)很簡(jiǎn)單但是很常用的效果，可能人人都會(huì)用到這樣的需求
請(qǐng)看下圖
導(dǎo)航欄的樣式切換功能，如果我們使用jquery之類的東西來(lái)寫(xiě)，可能要寫(xiě)好多代碼，那么我們用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":"首頁(yè)"
},
{
"text":"組件"
},
{
"text":"API"
},
{
"text":"我們"
}
],
changeRed:0
},
methods:{
reds:function(index){
this.changeRed = index;
}
}
});
仔細(xì)看看我們的js代碼除了模擬的數(shù)據(jù)其實(shí)就只有一個(gè)簡(jiǎn)單的邏輯處理，比起之前的各種操作dom省了好多事。
ps:vue 動(dòng)態(tài)樣式的解決方法
:class="{active: isActive}"
這個(gè)就沒(méi)什么好說(shuō)的了,但是在類名有'-'號(hào)的時(shí)候回報(bào)錯(cuò)，
還有一種
class="[lineStyle(courseClick)]"
lineStyle(isClick){
if (isClick===true){
return 'tab-items-current'
}else {
return 'class-tab-items'
}
}
總結(jié)
以上所述是小編給大家介紹的vue實(shí)現(xiàn)樣式之間的切換及vue動(dòng)態(tài)樣式的實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue中關(guān)于checkbox使用的問(wèn)題
這篇文章主要介紹了vue中關(guān)于checkbox使用的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue+highCharts實(shí)現(xiàn)可選范圍的圖表
這篇文章主要為大家詳細(xì)介紹了vue+highCharts實(shí)現(xiàn)可選范圍的圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
今天小編就為大家分享一篇淺談vue-router路由切換 組件重用挖下的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue項(xiàng)目中vue.config.js文件詳解
vue.config.js?是一個(gè)可選的配置文件,如果項(xiàng)目的?(和?package.json?同級(jí)的)?根目錄中存在這個(gè)文件,那么它會(huì)被?@vue/cli-service?自動(dòng)加載,這篇文章主要介紹了vue項(xiàng)目中vue.config.js文件的介紹,需要的朋友可以參考下2024-02-02
vue 地區(qū)選擇器v-distpicker的常用功能
這篇文章主要介紹了vue 地區(qū)選擇器v-distpicker的常用功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
Vue.js是前端三大框架之一,以其輕巧、高性能的特性脫穎而出,Vue.js專注于構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的Web界面,采用漸進(jìn)式設(shè)計(jì),易于上手,支持組件化開(kāi)發(fā),核心功能包括響應(yīng)式數(shù)據(jù)綁定和視圖組件的組合,Vue還提供了生命周期、事件綁定等多種功能,支持ES6語(yǔ)法2024-09-09
vue+iview/elementUi實(shí)現(xiàn)城市多選
這篇文章主要介紹了vue+iview/elementUi實(shí)現(xiàn)城市多選，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue常見(jiàn)組件間通信方案及典型應(yīng)用場(chǎng)景詳解
這篇文章主要為大家介紹了Vue常見(jiàn)組件間通信方案及典型應(yīng)用場(chǎng)景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue與后臺(tái)Api進(jìn)行交互通常是利用vue-resource來(lái)實(shí)現(xiàn)的，本質(zhì)上vue-resource是通過(guò)http來(lái)完成AJAX請(qǐng)求相應(yīng)的。這篇文章主要介紹了Vue中的vue-resource示例詳解,需要的朋友可以參考下2018-11-11
element ui loading加載開(kāi)啟與關(guān)閉方式
這篇文章主要介紹了element ui loading加載開(kāi)啟與關(guān)閉方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08