VUE2.0 全套 demo 讲解 基础 5（class 与 style 绑定）

在我即将在分享的专题里我现发一个问题，原本对于class和style的绑定我不想分享的，我觉得没多大意义，但是我错了，你别看一个小小的class和style绑定，用的好和用的差区别很大，特别在一些组件中的样式提取分离中很重要，在自己的页面逻辑，如何针对不同情况的样式动态改变去选择不同的：class写法，确保语意化强，逻辑清晰，我就用一些demo来给大家展示，老司机可以跳过，用最简介的demo把所有方式做的一清二楚https://juejin.im/post/58ef1cc60ce463006b95fb8a

接下来还是按着我们约定的来

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去传递数据来细化选择的样式
https://juejin.im/post/58e3bebcac502e49579fc1bd

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