vue动态绑定class与style总结

有的东西，看似简单，实则不简单，还是要多总结，在真实项目当中予以应用。

在vue当中绑定class和style的方式有很多种，基本都知道，但是在项目当中真正遇到需要用样式变化呢的场景却怎么也想不起来，很模糊，只能写一些简单地样式逻辑，今天来总结一下vue中动态绑定样式的情况。

demo01:

点击激活按钮flag变量取反，切换div class类名应用isActive类或者不应用isActive类。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .isActive {
    background: red
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <div :class="{'isActive':flag}">
      我是一个div
    </div>
    <button @click="flag=!flag">激活</button>
  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        flag: false
      }
    },

  })
</script>

</html>

demo02:

两个按钮分别对isred和isblue变量做取反，盒子本来有个类名circle，动态添加isred和isblue类，class和:class可以共存

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 22:41:24
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 22:49:16
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .isActive {
    background: red
  }

  .bg-red {
    background: red;
  }

  .text-blue {
    color: blue
  }

  .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <div class="circle" :class="{'bg-red':isred,'text-blue':isblue}">
      我是一个div
    </div>
    <button @click="isred=!isred">激活</button>
    <button @click="isblue=!isblue">激活</button>
  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        isred: false,
        isblue: false
      }
    }
  })
</script>

</html>

demo03:

当:class的表达式过长或逻辑复杂时，还可以绑定一个计算属性，一般当条件多余2个时，都可以使用data或者computed，例如使用计算属性：

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:03:05
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 23:10:22
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .active {
    color: blue;
    background: red;
  }

  .error-info {
    color: black;
    background: #ccc;
  }

  .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <div class="circle" :class="classes">
      我是一个div {{isred}} {{isblue}}
    </div>
    <button @click="isred=!isred">激活</button>
    <button @click="isblue=!isblue">激活</button>
  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        isred: false,
        isblue: false
      }
    },
    computed: {
      classes() {
        return {
          active: this.isred && this.isblue,
          'error-info': !this.isred && !this.isblue,
        }
      }
    }

  })
</script>

</html>

demo04

盒子拥有多个类名，则用数组语法标识注意：带中划线的类型需要加引号！

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:03:05
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 23:21:53
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .red {
    background: red;
  }

  .text-blue {
    color: blue
  }

  .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <div :class="[red,'text-blue',circle]">
      我是一个div
    </div>

  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        red: 'red',
        'text-blue': 'text-blue',
        circle: 'circle'
      }
    },
    computed: {

    }

  })
</script>

</html>

demo05

数组语法配合三元表达式或者对象语法注：第一种三元表达式和第二种对象语法效果是一样的

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:03:05
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 23:26:56
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .red {
    background: red;
  }

  .text-blue {
    color: blue
  }

  .circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <div :class="[isred? red:'','text-blue',circle]">
      我是一个div
    </div>

    <div :class="[{'red':isred},'text-blue',circle]">
      我是一个div
    </div>
    <button @click="isred=!isred"></button>
  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        red: 'red',
        'text-blue': 'text-blue',
        circle: 'circle',

        isred: false
      }
    },
    computed: {

    }

  })
</script>

</html>

demo06

利用计算属性动态生成盒子类名，通过下拉框控制btn-large btn-middle btn-small的切换，通过disabled变量控制btn-disabled的添加与移除。

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:33:25
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 23:42:28
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .btn-disabled {
    background: #aaa;
  }

  .btn-large {
    width: 200px;
    height: 80px;
  }

  .btn-middle {
    width: 120px;
    height: 60px;
  }

  .btn-small {
    width: 80px;
    height: 50px;
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <button :class="dynamicClass">我是动态按钮</button>
    <select v-model="size">
      <option value="">请选择</option>
      <option value="large">大</option>
      <option value="middle">中</option>
      <option value="small">小</option>
    </select>
    <button type="button" @click="disabled=!disabled">切换动态按钮是否禁用</button>
  </div>
</body>
<script>
  var app = new Vue({
    el: "#app",
    data() {
      return {
        size: '',
        disabled: true
      }
    },
    computed: {
      dynamicClass() {
        return [
          'btn',
          {
            ['btn-' + this.size]: this.size !== "",
            ['btn-disabled']: this.disabled
          }
        ]
      }
    }

  })
</script>

</html>

demo07

绑定在组件上注：组件上绑定的class会渲染到组件根元素上！

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:33:25
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-27 23:53:27
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .red {
    color: red
  }

  .fontClass {
    font-size: 55px
  }
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>

<body>
  <div id="app">
    <my-component :class="{'red':isred}"></my-component>
    <button @click="isred=!isred">点击切换</button>
  </div>
</body>
<script>
  Vue.component("my-component", {
    template: "<p>我是一段文本</p>"
  })
  var app = new Vue({
    el: "#app",
    data() {
      return {
        isred: false
      }
    },
    computed: {
    }

  })
</script>

</html>

demo08

内联样式，也有数组语法，对象语法，复杂且长可以写到data或computed中

<!--
 * @Descriptions: 
 * @Version: 
 * @Author: 
 * @Date: 2020-07-27 23:33:25
 * @LastEditors: dongwenjie
 * @LastEditTime: 2020-07-28 00:05:16
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<body>
  <div id="app">
    <div>
      <el-color-picker v-model="color"></el-color-picker>
      <div :style="{'color':color,'fontSize':fontSize+'px'}">内联style</div>
      <button @click="fontSize++">加大字号</button>
    </div>
  </div>
</body>
<script>

  var app = new Vue({
    el: "#app",
    data() {
      return {
        color: null,
        fontSize: 12
      }
    },
    computed: {
    }

  })
</script>

</html>

链接: https://www.fly63.com/article/detial/9531