首頁  >  文章  >  web前端  >  在vue中如何實現樣式之間的切換

在vue中如何實現樣式之間的切換

亚连
亚连原創
2018-06-19 16:48:362233瀏覽

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

前言

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

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

#請看下圖

導覽列的樣式切換功能,如果我們使用jquery之類的東西來寫,可能要寫好多程式碼,那我們用vue呢,

程式碼如下

html

##附上vue中style與class綁定API

<p id="wrap" class="box">
  <p v-for="(list,index) in navLists" class="nav" :class="{ red:changeRed == index}" @click="reds(index)">{{list.text}}</p>
</p>

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程式碼除了模擬的資料其實只有一個簡單的邏輯處理,比起之前的各種操作dom省了好多事。

ps:vue 動態樣式的解決方法#

:class="{active: isActive}"

這個就沒什麼好說的了,但是在類別名稱有'-'號的時候回報錯,

還有一種

class="[lineStyle(courseClick)]"
    lineStyle(isClick){
        if (isClick===true){
          return &#39;tab-items-current&#39;
        }else {
          return &#39;class-tab-items&#39;
        }
      }

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

在JavaScript中如何實現數值自動增加

在React專案中如何使用Redux(詳細教學)

在ionic3中如何實作隨機佈局瀑布流

#在JS如何實現回到頂部效果#

以上是在vue中如何實現樣式之間的切換的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn