Vue核心技术-10,class和style的绑定

一,前言

前面methods,computed,watch告一段落,
基础知识这块的顺序确实有些乱,日后需要花时间捋一下,应该影响不大
之前已经解除过了v-bind及他的语法糖":"写法,这篇介绍class和style的绑定

---

二,绑定class

Vue通过v-bind:class(:class)对class进行绑定,
绑定的值可以是多种类型,如:字符串,对象,数组
可以通过改变绑定值动态切换class

1,字符串类型

<style>
  .classA {
    color: red;
  }
  .classB {
    color: blue;
  }
</style>

<div id="app">
  <p :class="myClass">:class值为字符串</p>
</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      myClass: 'classA'
    }
  })
</script>

运行结果:

查看DOM:

使用devTools修改变量myClass值为classB:

通过字符串形式为:class绑定变量myClass,为myClass赋值为classA,
最终为Dom应用class样式类,当变量名改变时,可以实现动态更改样式

2,对象类型

对象类型即Json格式,Json对象中可以包含多个键值,
因此可实现对多个class进行绑定和切换控制
键为class名称(字符串),值为布尔类型,表示是否应用此样式

<div id="app">
  <div :class="{'active': isActive, 'error': isError}">
      对象类型-多个class分别控制应用
  </div>
</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
        isActive: true,    // 应用样式
        isError: false     // 不应用样式
    }
  })
</script>

渲染结果:

  <div class="active">
      对象类型-多个class分别控制应用
  </div>

此外,如果:class表达式过长或逻辑教复杂,可将逻辑绑定到计算属性

<div id="app">
  <div :class="classes">
      对象类型-封装在对象属性中
  </div>
</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
        isActive: true,    // 应用样式
        isError: false     // 不应用样式
    },
    computed:{
        classes:function() {
            return {
                active: this.isActive && !this.isError,
                error: this.error
            }
        }
    }
  })
</script>

除了计算属性,还可以使用methods或绑定到Object类型的数据

3,数组类型

:class值为数组类型,有点儿类似于字符串类型的情况
只不过字符串只能绑定单个class,数组可以同时绑定多个class

<div id="app">
  <div :class="[activeClass, errorClass]">
      数组类型
  </div>
</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
        activeClass: 'active',
        errorClass: 'error'
    }
  })
</script>

渲染结果:

<div class="active error">数组类型</div>

也可以使用三元表达式控制class的切换和显示

<div :class="[isActive ? activeClass : '', errorClass]">数组类型-三元表达式</div>

数组中也可以包含对象类型,所以可以在数组中应用上边对象类型的写法对class进行控制应用

<div :class="[{'active': isActive}, errorClass]">数组类型包含对象类型</div>

最后,与对象类型的写法一样,也可以使用data,computed或methods方式对class进行控制
以计算属性为例-使用计算属性,返回数字

<button class="classes"></button>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
        size: 'large',
        disabled: true
    },
    computed: {
        classes: function() {
            return [
                'btn'
                {
                    ['btn-' + this.size]: this.size !== '',
                    ['btn-disabled']: this.disabled
                }
            ]
        }
    }
  })
</script>

渲染结果为:

<button class="btn btn-large btn-disabled"></button>

注意:此处使用Json语法,[‘btn-’ + this.size],动态拼接出class名称

4,对于样式的绑定还可以应用在组件上

对样式的绑定还可以应用在组件上,虽然目前尚未介绍到组件,但用法和上边的方式相同

注意:

这种用法仅适用于自定义组件的最外层是一个根元素的情况,否组无效
当不满足此种情况且需要为子元素设置类名时,应使用组件props进行传递,
绑定style也同样适用

---

三,绑定内联样式style

适用v-bind:style(:style)为元素绑定内联样式,方法与:class相似
:style的值类型也可以为对象或数组

1,通过变量为内敛样式的属性赋值

像正常写内联样式一样,将内敛样式的属性值用变量进行传递

<div id="app">
  <p :style="{color:activeColor, 'fontSize': fontSize}">
      通过变量为内敛样式的属性赋值
  </p>
</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      activeColor: 'red',
      fontSize: '20px'
    }
  })
</script>

运行结果:

属性名适用驼峰命名(camelCase)或短横线分隔命名(kebab-case),渲染结果为:

注意 : fontSize渲染结果为font-size

2,对象方式为:style赋值

向上边的例子,在html中写入很长一段样式是不便于阅读和维护的
可以将样式以对象的形式写到data或computed中,再对:style进行赋值

以data为例:

<div id="app">
  <p :style="styles">
      对象方式为:style赋值
  </p>
</div>

<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
        styles:{
            color: 'red',
            fontSize: 20 + 'px'
        }
    }
  })
</script>

3,数组方式为:style赋值

:style值为数组类型,和:class数组类型语法类似
数组语法可以同时应用多个样式对象,如:

<div :style="styleA, styleB">数组方式为:style赋值</div>

注意:

在实际开发中,:style并不常用,好比不提倡写内联样式一样
往往将样式写到一个对象或计算属性中

使用:style时,Vue.js会自动为特殊的CSS属性名称添加前缀,如:transform

---

四,结尾

关于样式绑定的介绍就到这里,对于多种方式的选取,需要根据项目的实际情况考虑