vue樣式的切換及vue動態樣式的使用教程

本文要給大家介紹vue的樣式切換一級vue的動態樣式的使用教程，下面給大家帶來幾個小案列，需要的朋友可以借鑒研究一下。

既然我們選擇了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代碼除了類比的資料其實就只有一個簡單的邏輯處理，比起之前的各種操作dom省了好多事。

ps:vue 動態樣式的解決方案

:class="{active: isActive}"

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

還有一種

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

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

php中最簡單的字串匹配演算法，php匹配演算法_PHP教程

最簡單的php中字串匹配演算法教程

php如何?棧資料結構以及括弧匹配演算法的程式碼範例詳解