這篇文章主要介紹了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 'tab-items-current' }else { return 'class-tab-items' } }上面是我整理給大家的,希望今後會對大家有幫助。 相關文章:
以上是在vue中如何實現樣式之間的切換的詳細內容。更多資訊請關注PHP中文網其他相關文章!