vue實現(xiàn)樣式之間的切換及vue動態(tài)樣式的實現(xiàn)方法

更新時間：2017年12月19日 16:42:02 投稿：mrr

這篇文章主要介紹了vue中如何實現(xiàn)樣式之間的切換及vue動態(tài)樣式的實現(xiàn)方法，本文給大家介紹的非常詳細，具有參考借鑒價值,需要的朋友可以參考下

前言

既然我們選擇了vue，那么在做東西時就不要想著去操作dom，所有的都交給vue來解決。

下面來說一個很簡單但是很常用的效果，可能人人都會用到這樣的需求

請看下圖

導航欄的樣式切換功能，如果我們使用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;
        }
      }
    });

仔細看看我們的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)方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

vue中關(guān)于checkbox使用的問題
這篇文章主要介紹了vue中關(guān)于checkbox使用的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue+highCharts實現(xiàn)可選范圍的圖表
這篇文章主要為大家詳細介紹了vue+highCharts實現(xiàn)可選范圍的圖表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
淺談vue-router路由切換組件重用挖下的坑
今天小編就為大家分享一篇淺談vue-router路由切換組件重用挖下的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue項目中vue.config.js文件詳解
vue.config.js?是一個可選的配置文件,如果項目的?(和?package.json?同級的)?根目錄中存在這個文件,那么它會被?@vue/cli-service?自動加載,這篇文章主要介紹了vue項目中vue.config.js文件的介紹,需要的朋友可以參考下
2024-02-02
vue 地區(qū)選擇器v-distpicker的常用功能
這篇文章主要介紹了vue 地區(qū)選擇器v-distpicker的常用功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-07-07
Vue配合Django使用方式
Vue.js是前端三大框架之一,以其輕巧、高性能的特性脫穎而出,Vue.js專注于構(gòu)建數(shù)據(jù)驅(qū)動的Web界面,采用漸進式設(shè)計,易于上手,支持組件化開發(fā),核心功能包括響應(yīng)式數(shù)據(jù)綁定和視圖組件的組合,Vue還提供了生命周期、事件綁定等多種功能,支持ES6語法
2024-09-09
vue+iview/elementUi實現(xiàn)城市多選
這篇文章主要介紹了vue+iview/elementUi實現(xiàn)城市多選，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-03-03
Vue常見組件間通信方案及典型應(yīng)用場景詳解
這篇文章主要為大家介紹了Vue常見組件間通信方案及典型應(yīng)用場景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
Vue中的vue-resource示例詳解
Vue與后臺Api進行交互通常是利用vue-resource來實現(xiàn)的，本質(zhì)上vue-resource是通過http來完成AJAX請求相應(yīng)的。這篇文章主要介紹了Vue中的vue-resource示例詳解,需要的朋友可以參考下
2018-11-11
element ui loading加載開啟與關(guān)閉方式
這篇文章主要介紹了element ui loading加載開啟與關(guān)閉方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08