史上最詳細 VUE2.0 全套 demo 講解基礎 5（class 與 style 綁定）

時間 2019-11-30

標籤史上詳細 vue2.0 vue 全套 demo 講解基礎 class style 綁定简体版

原文原文鏈接

做者：混元霹靂手 - Ziksangjavascript

在我即將在分享的專題裏我現發一個問題，本來對於class和style的綁定我不想分享的，我以爲沒多大意義，可是我錯了，你別看一個小小的class和style綁定，用的好和用的差區別很大，特別在一些組件中的樣式提取分離中很重要，在本身的頁面邏輯，如何針對不一樣狀況的樣式動態改變去選擇不一樣的：class寫法，確保語意化強，邏輯清晰，我就用一些demo來給你們展現，老司機能夠跳過，用最簡介的demo把全部方式作的一清二楚前端

接下來仍是按着咱們約定的來vue

1.本文分享計算屬性

2.代碼運行vue-cli 2.1版本

3.組件代碼都在components文件夾裏

4.主代碼邏輯都在 App.vue文件夾裏

我什麼都不要我只要java

贊

咱們先針對這個例子講一個demovue-cli

對象語法api

咱們能夠傳給 v-bind:class 一個對象，以動態地切換 class 。
:class裏是一個對象的時候數組

<div v-bind:class="{ active: isActive }"></div>複製代碼

active : 表明一個class名
isActive : 這個用來返回true or false或者一種表達式判斷返回的true or false微信

我也相信你們作過這種需求，如今有十個問題給咱們，讓咱們去選擇，當選擇到的部分把們把他標紅，這那種方法最簡便呢。那種方法最好呢？若是問題是後臺手動建創可配的，那咱們又要如何去作呢？這裏會給你們普及一個知識點，那就是$set用法
this.$set(object,key,value)
意思就是在對象中設置一個對象裏的屬性，沒有就添加，有就修改app

咱們先針對這個例子講一個demo組件化

App.vue

<template>
     <ul>
         <li v-for='(item,index) in message' @click='item.isred = !item.isred' :class='{ red : item.isred }'>{{item.name}}</li>
     </ul>
</template>

<script>
    export default {
        created () {
            let data = [
                    {name : '混無霹靂手帥不？'},
                    {name : '混無霹靂手是老司機不？'},
                    {name : '混無霹靂手分享的好很差？'}
            ]
            for(let i of data){
                this.$set(i,"isred",false)
            }
            this.message = data
        },
        data () {
            return {
                message : [] 
            }
        }
    }
</script>


<style>
.red{
    background:red;
}
</style>複製代碼

咱們看成data是咱們後臺給來的數據，可是有點很讓人頭疼，後臺通常只會給你一些數據只是關於問題的，不會給你關於顏色高亮標識的數據，那怎麼辦，那咱們用this.$set這個方法對每一個對象里加一個isred屬性，值都爲false，由於都沒有選擇，以上的寫方我我的看來是比較最簡便的，我以爲一些點擊事件能簡便寫在tepmplate裏，咱們就寫在template裏

你也能夠直接綁定數據裏的一個對象：

當咱們點擊要根據需求改變動多的樣式，更多的class
若是咱們都放在：class裏面我以爲不清晰，此時的語意化就不明顯了

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}複製代碼

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

data: {
  isActive: true,
  hasError: false
}複製代碼

以上二者對比，咱們很明示的看出來，第一個書寫出來更加簡便代碼量少，語意化更加有針對性

計算屬性改變class樣式

若是要經過複雜的邏輯，如今又有一個demo場景，如今有一個按扭，必須把三個問題全選我才能夠提交，按鈕色彩高亮，若是咱們就是單單用javascript表達式來進行判斷，行不通，那這時候選用computed最好

APP.vue

<template>
     <div>
        <ul>
            <li v-for='(item,index) in message' @click='item.isred = !item.isred' :class='{ red : item.isred }'>{{item.name}}</li>
        </ul>
        <button :class='allchoose'>必須全選才能夠提交</button>
     </div>
</template>

<script>
    export default {
        created () {
            let data = [
                    {name : '混無霹靂手帥不？'},
                    {name : '混無霹靂手是老司機不？'},
                    {name : '混無霹靂手分享的好很差？'}
            ]
            for(let i of data){
                this.$set(i,"isred",false)
            }
            this.message = data
        },
        data () {
            return {
                message : [] 
            }
        },
        computed : {
           allchoose () {
               for(let i of this.message){
                   if( i.isred == false){
                       return {yellow : false}
                   }
               }
               return {yellow : true}
           } 
        }
    }
</script>


<style>
.red{
    background:red;
}
button{
    background:gray;
}
.yellow {
    background:yellow
}
</style>複製代碼

在計算屬性這個章中我講過compunted主要用於維護返一個返回值，經過對每一個對象裏isred進行判斷，一但任何一個isred有變更，computed都會重新計劃，再進行返回，三個全選中則黃色高亮，若是任一一個沒選則去除高亮，在computed維護的是一個返回對象

class數組寫法

在數組寫法中，咱們能夠寫兩種寫法，第一個字符串寫法第二個屬性值寫法，
1.寫法方便之處若是用數組三元表達式，確定是字符串寫法比較清楚簡單
2.屬性值寫法是根據不一樣的邏輯需求改變而改變，比較有適用場景

兩種寫法也能夠放在一塊兒，給一個demo

<template>
     <div>
        <ul>
            <li v-for='(item,index) in message' @click='item.isred = !item.isred' :class="['red',sizeClass]">{{item.name}}</li>
        </ul>
     </div>
</template>

<script>
    export default {
        created () {
            let data = [
                    {name : '混無霹靂手帥不？'},
                    {name : '混無霹靂手是老司機不？'},
                    {name : '混無霹靂手分享的好很差？'}
            ]
            for(let i of data){
                this.$set(i,"isred",false)
            }
            this.message = data
        },
        data () {
            return {
                message : [],
                sizeClass : 'size'
            }
        }
    }
</script>


<style>
.red{
    background:red;
}
.size {
    font-size:40px;
}
</style>複製代碼

三元表達式寫法，這個寫法，這個寫起來很爽，咱們針對前面第一個列子咱們再換一種方法式寫看看如何在template裏來進行語議話的寫法

<template>
     <div>
        <ul>
            <li v-for='(item,index) in message' @click='item.isred = !item.isred' :class="[item.isred == true?'red':'green']">{{item.name}}</li>
        </ul>
     </div>
</template>

<script>
    export default {
        created () {
            let data = [
                    {name : '混無霹靂手帥不？'},
                    {name : '混無霹靂手是老司機不？'},
                    {name : '混無霹靂手分享的好很差？'}
            ]
            for(let i of data){
                this.$set(i,"isred",false)
            }
            this.message = data
        },
        data () {
            return {
                message : [],
            }
        }
    }
</script>


<style>
.red{
    background:red;
}
.size {
    font-size:40px;
}
</style>複製代碼

第一種對象寫和三元表達式寫法各有各的好處，看你們喜歡了，但三元表達式寫法更貼近語意化吧

組件樣式寫法

在若是咱們在組件裏雖然定義好樣式，可是若是在組件上再進行一層樣式添加或者用語法綁定都不會覆蓋前先前的樣式，這裏我就不給demo了，我以爲官網的這個demo還不錯，我以爲很差的demo我會給你們舉一些列子出來

當你在一個定製的組件上用到 class 屬性的時候，這些類將被添加到根元素上面，這個元素上已經存在的類不會被覆蓋。
例如，若是你聲明瞭這個組件:

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})複製代碼

而後在使用它的時候添加一些 class：

<my-component class="baz boo"></my-component>複製代碼

HTML 最終將被渲染成爲:
<p class="foo bar baz boo">Hi</p>
一樣的適用於綁定 HTML class :
<my-component v-bind:class="{ active: isActive }"></my-component>
當 isActive 爲 true 的時候，HTML 將被渲染成爲:
<p class="foo bar active">Hi</p>