史上最详细 VUE2.0 全套 demo 讲解 基础 5（class 与 style 绑定）

做者 ： 混元霹雳手 - Ziksang

在我即将在分享的专题里我现发一个问题，本来对于class和style的绑定我不想分享的，我以为没多大意义，可是我错了，你别看一个小小的class和style绑定，用的好和用的差区别很大，特别在一些组件中的样式提取分离中很重要，在本身的页面逻辑，如何针对不一样状况的样式动态改变去选择不一样的：class写法，确保语意化强，逻辑清晰，我就用一些demo来给你们展现，老司机能够跳过，用最简介的demo把全部方式作的一清二楚

接下来仍是按着咱们约定的来

1.本文分享 计算属性

2.代码运行vue-cli 2.1版本

3.组件代码都在components文件夹里

4.主代码逻辑都在 App.vue文件夹里

我什么都不要我只要

赞

咱们先针对这个例子讲一个demo

对象语法

咱们能够传给 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)
意思就是在对象中设置一个对象里的属性，没有就添加，有就修改

咱们先针对这个例子讲一个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>

style写法
对于style写法用于那里比较好，我我的认为用法不少，若是只是一些小icon或者小spinner集合出来的简单组件，只是向外暴露的是不一样的样式改变，若是基于这个样式咱们以为配置的细点，能够用于style写法

具体如何用，大家能够去看一下我写的spinner组件，里面就用到用style去传递数据来细化选择的样式
juejin.im/post/58e3be…

对于学vue的朋友,想真真的组件化本身的一个网站，必须打好vue api的基础，这个是必然的也是我分享强调的，后继不管你作项目也好，仍是写组件也好，会很爽，很受益，关于vue我仍是会停进行分享

渣渣前端开发工程师，喜欢钻研，热爱分享和讲解教学， 微信 zzx1994428 QQ494755899

支持我继续创做和感到有收获的话，请向我打赏点吧

若是转载请标注出自@混元霹雳手ziksang