欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2017年12月19日 16:42:02   投稿：mrr  
這篇文章主要介紹了vue中如何實(shí)現(xiàn)樣式之間的切換及vue動(dòng)態(tài)樣式的實(shí)現(xiàn)方法，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值,需要的朋友可以參考下

前言

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

下面來(lái)說(shuō)一個(gè)很簡(jiǎn)單但是很常用的效果，可能人人都會(huì)用到這樣的需求

請(qǐng)看下圖

導(dǎo)航欄的樣式切換功能，如果我們使用jquery之類(lèi)的東西來(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ō)的了,但是在類(lèi)名有'-'號(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)文章

最新評(píng)論