vue2.x中class和style绑定的实际应用

作者: 我是你班主任 | 来源:发表于2018-05-22 17:31 被阅读0次

vue2.x中class和style绑定的实际应用
vue入门3---class与style绑定、条件渲染指令、列表
vue重新起航（三）
Vue.js学习笔记
Vue中的class绑定和style绑定
vue 动态绑定class,style
v-bind 及 class 与 style 绑定
class和style绑定
vue中class和style绑定
2018-09-29

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>