- class和style绑定应该是最常用的属性之一了，两个属性的作用几乎都是围绕着改变样式，本篇文章讨论的是class和style的应用场景和技巧。如果有发现有争议的地方，欢迎指正、讨论或补充（づ￣3￣）づ╭❤～
什么时候应该用style绑定？
- 当样式值需要动态计算的时候需要用到:style，比如.div2的高度需要设置为跟高度不固定的.div1相同，这个时候可以配合vue的计算属性computed来编写
<body>
<div class="div1">里面有个不知道有多少条的list</div>
<div class="div2" :style="styleHeight"></div>
</body>
computed: {
styleHeight () {
let _el = this.$el.querySelector('.div1')
let height = window.getComputedStyle(_el, null).getPropertyValue('height')
return {height: height}
}
}
应该只有这一种情况一定要用到:style，其他能用:class的尽量都用:class，因为HTML，js，css，还是分开写看起来条理比较清晰，维护起来也容易一些。要是你样式写的哪儿哪儿都是，其他同事读你的代码的时候会很崩溃的。。
什么时候应该用class绑定？
如果你想动态改变样式，首先想到的就应该是这种方法，实在不行了再去用内联style。Vue.js 在这方面做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。下面举几个实际应用中最常见的例子（需求是乱写的）
需求1：做一个状态列表，不同的状态用不同颜色的字体展示。
先写个错误示例
<template>
<ul>
<li v-for="item in statusList" :key="item.statusCode">
<span class="list-item status1" v-if="item.statusCode === 1">item.text</span>
<span class="list-item status2" v-else-if="item.statusCode === 2">item.text</span>
<span class="list-item status3" v-else-if="item.statusCode === 3">item.text</span>
<span class="list-item status4" v-else-if="item.statusCode === 4">item.text</span>
</li>
</ul>
</template>
<script>
export default {
data () {
return {
statusList: [
{text: '已终止', statusCode: 1},
{text: '审批中', statusCode: 2},
{text: '审批通过', statusCode: 3},
{text: '提交审批', statusCode: 4}
]
}
}
}
</script>
<style>
.list-item {
font-size: 12px;
line-height: 20px;
}
.status1 {
color: red
}
.status2 {
color: blue
}
.status3 {
color: green
}
.status4 {
color: yellow
}
</style>
这样写的同学应该是基本没看过文档的，写Vue之前我觉得至少应该先把文档的基础部分看完，这样写出来的代码在熟练了Vue之后至少不会有重写它的冲动┑(￣Д ￣)┍，好我们来修改一下HTML部分：
<template>
<ul>
<li v-for="item in statusList" :key="item.statusCode">
<span :class="['list-item', 'status'+item.statusCode]">item.text</span>
</li>
</ul>
</template>
代码是不是精简多了？这种写法就是文档中的数组语法+拼接字符串，数组的元素可以是字符串、模型字段、表达式或对象，上面写法数组中的第一项是每个span都有的类名，第二项是根据statusCode动态改变的类名
- 需求2：做一个产品列表，如果这条产品是公司代销的就字体加粗
<template>
<ul>
<li v-for="item in productList" :key="item.code">
<span :class="[list-item, {'bold': item.isProxySold}]">item.name</span>
</li>
</ul>
</template>
<script>
export default {
data () {
return {
productList: [
{name: '产品1', code: '1', isProxySold: true},
{name: '产品2', code: '2', isProxySold: true},
{name: '产品3', code: '3', isProxySold: false},
{name: '产品4', code: '4', isProxySold: false}
]
}
}
}
</script>
<style>
.list-item {
font-size: 12px;
line-height: 20px;
}
.bold {
font-weight: 600;
}
</style>
这样写的渲染结果就是产品1和产品2的名称会加粗，当然你也可以这么写，渲染结果是一样的
<template>
<ul>
<li v-for="item in productList" :key="item.code">
<span :class="[list-item, item.isProxySold ? 'bold' : '']">item.name</span>
</li>
</ul>
</template>
- 需求3：写一个按钮组，点击高亮
<template>
<div class="button-group">
<button :class="['button-item', {'active': activeIndex === index}]" v-for="(item, index) in buttonList" :key="index" @click="clickButton(index)">
</div>
</template>
<script>
export default {
data () {
return {
activeIndex: 0,
buttonList: [
{text: '按钮1'},
{text: '按钮2'},
{text: '按钮3'},
{text: '按钮4'}
]
}
},
methods: {
clickButton (index) {
/**
* 如果不想写这个方法，可以把赋值语句写到HTML中的@click里，@click="activeIndex = index",
* 但是一般点击按钮都会有后续操作
*/
this.activeIndex = index
}
}
}
</script>
<style>
.button-group {
font-size: 14px;
line-height: 24px;
}
.button-group .button-item {
color: #333;
padding: 4px 20px;
background: #fff;
border: 1px solid #ccc;
margin-right: 20px;
}
.button-group .active {
color: #4095ff
}
</style>
结语
用法差不多就是这么多了，对于vue初学者，前期建议啃一啃文档，后期可以带着问题有针对性的去深入理解文档，在你对vue的用法越来越熟练的时候你就会觉得之前写的全是屎
