vue2之class与style绑定

元子不圆呀
1,662 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

对于样式来说，我们可以使用很多种方式，对于在标签上设置的样式，常用的就是class类选择器样式和内联样式。在vue中，操作元素的class列表和内联样式是数据绑定的一个常见需求。由于这两个都是属性，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。这也就是class与style绑定。

class绑定

class绑定的样式很简单，只需要使用v-bind即可。

<div :class=""></div>

上面这种是class绑定的基本用法，其中:class的属性值可以是很多种形式，比如：字符串， 数组， 对象。

1. 字符串用法

<div :class="text-wrapper">我是测试文本</div>

<style scoped>
  .text-wrapper {
    color: #000;
  }
</style>

效果如下：

image.png

<template>
  <div class="hello">
    <div :class="textClass">我是测试文本</div>
    <button @click="changeClass">改变样式</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      textClass: 'normal-text'
    }
  },
  methods: {
    changeClass () {
      this.textClass = 'success-text'
    }
  }
}
</script>

<style scoped>
  .normal-text {
    color: #000;
  }
  .success-text {
    color: rgb(112, 177, 14)
  }
  .error-tetx {
    color: rgb(204, 35, 35);
  }
</style>

效果如下：

image.png

切换颜色，效果如下：

image.png

应用场景

这种方式使用于类名不确定，需要动态获取的场景。比如大部分样式都是相同的，只是在特定场合下需要通过交互切换某些状态的样式那么就很适用这种字符串的绑定。

2. 数组用法

使用数组绑定class可以结合其他的表达式或者对象衍生出很多写法，下面我们一一介绍。

2.1 基本用法

<div :class="['normal-text', 'normal-bg']">我是测试文本</div>

<style scoped>
  .normal-text {
    color: #000;
  }
  .normal-bg {
    background-color: #ccc;
  }
</style>

效果如下：

image.png

也可以将这些样式数组用一个变量保存，效果是一样的。

2.2 三元运算表达式用法

数组中的每一项也可以单独用三元运算表达式来写。

<div :class="[isError ? 'error-tetx' : 'normal-text', 'normal-bg']">我是测试文本</div>

data () {
  return {
    isError: true
  }
}

<style scoped>
  .normal-text {
    color: #000;
  }
  .success-text {
    color: rgb(112, 177, 14)
  }
  .error-tetx {
    color: rgb(204, 35, 35);
  }
  .normal-bg {
    background-color: #ccc;
  }
</style>

效果如图：

image.png

2.3 数组内包含对象用法

数组中的每一项也可以单独用对象来表示

<div :class="[{ 'error-tetx': isError }, 'normal-bg']">我是测试文本</div>

data () {
  return {
    isError: true
  }
}

<style scoped>
  .normal-text {
    color: #000;
  }
  .success-text {
    color: rgb(112, 177, 14)
  }
  .error-tetx {
    color: rgb(204, 35, 35);
  }
  .normal-bg {
    background-color: #ccc;
  }
</style>

效果如上图

应用场景

使用数组的方式绑定class适用于一开始不确定class的个数，也不确定class的名称。这种就可以通过实际交互改变数组的个数和名称。 如果数组中某一项又是动态的值，那么就可以对那一项使用三元运算符或者对象的形式。

3. 对象用法

<div :class="{ 'error-tetx': isError,  'error-bg': isError}">我是测试文本</div>

data () {
  return {
    isError: true
  }
},

<style scoped>
  .normal-text {
    color: #000;
  }
  .error-tetx {
    color: rgb(204, 35, 35);
  }
  .normal-bg {
    background-color: #ccc;
  }
  .error-bg {
    background-color: rgb(241, 235, 235);
  }
</style>

效果如下：

image.png

应用场景

适用于要绑定的class个数确定，名称确定，但要动态决定要不要用。

style绑定

同class一样，style也可以动态绑定，不过它的使用没有数组那么复杂，一般只有两种形式：对象用法和数组用法。

1. 对象用法

对象用法很好理解，就是绑定的style的属性值是个对象，比如： :style="{}"

<div :style="{'fontSize': fontSize + 'px', 'color': '#ccc'}">我是style绑定的测试文本</div>
data () {
  return {
    fontSize: 16
  }
}

效果如下：

image.png

上面的代码也可以将对象用一个变量保存，效果也是一样的

<div :style="styleObj">我是style绑定的测试文本</div>
data () {
  return {
    styleObj: {
      fontSize: '16px',
      color: '#ccc'
    }
  }
}

2. 数组用法

数组的用法虽然写的数组，但是数组中的每一项实际上还是对象

<div :style="[styleObj, bgObj]">我是style绑定的测试文本</div>
data () {
  return {
    styleObj: {
      fontSize: '16px',
      color: '#fff'
    },
    bgObj: {
      backgroundColor: '#ccc'
    }
  }
}

效果如下：

image.png

3. 多重值用法

从vue2.3.0起，style绑定的属性值可以是包含多个值的数组，这种方式一般用于写浏览器的前缀

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

应用场景

对于style的绑定来说，虽然有好几种应用场景，但是我们一般用的最多的就是对象的用法，因为style样式的优先级很高，我们一般不会将很多的样式都绑定到style上，只有那些样式属性的值是动态的情况下才会使用到，而且要注意不要往style属性值的对象中写太多内容在模板中，这样不方便阅读和代码维护。

avatar
文章
阅读
粉丝