Vue.js基础-06-绑定样式（v-bind）-01-绑定class属性（v-bind:class）

玄德公笔记

已于 2022-11-19 00:04:49 修改

阅读量1.8k

点赞数 4

分类专栏： # vue框架学习文章标签： vue.js javascript 前端 v-band class

于 2022-05-28 22:35:42 首次发布

本文链接：https://blog.csdn.net/xingzuo_1840/article/details/124774944

版权

vue框架学习专栏收录该内容

19 篇文章 5 订阅

订阅专栏

1. class 属性绑定

语法示例

  <div id="app">
    <div v-bind:class="{ 'active': isActive }"></div>
  </div>

说明：
名为app的ID被 Vue实例绑定
active 是前边定义的stlye
isActive 是一个bool值，true的时候样式被调用

完整示例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <style>
    .active {
      width: 100px;
      height: 100px;
      background: green;
    }
  </style>
</head>

<body>
  <div id="app">
    <div v-bind:class="{ 'active': isActive }"></div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        isActive: true
      }
    })
  </script>
</body>

</html>

结果显示

2. 属性的覆盖

2.1 绑定多个值相互覆盖

语法示例

三个active，前边相同项的会被后边的覆盖

<div id="app">
  <div class="static"
     v-bind:class="{ 'active1': true , 'active2': true, 'active3': true}">
  </div>
</div>

完整示例

代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <style>
    .active {
      width: 100px;
      height: 100px;
      background: green;
    }

    .red {
      background: red;
    }

    .blue {
      background: blue;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="static" v-bind:class="{ 'active': isActive , 'red': hasError, 'blue': true}">
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        isActive: true,
        hasError: true
      }
    })
  </script>
</body>

</html>

结果显示

active中定义的绿色会被red中定义的红色覆盖，red中定义的红色又会被后边blue定义的蓝色覆盖，最终显示为蓝色。
而active中定义的大小因为后边都没有定义，因此不会改变

在这里插入图片描述

2.2 绑定一个对象（对象成员间覆盖）

和2.1中效果相同

语法示例

绑定一个对象 “classObject”

  <div id="app">
    <div class="static" v-bind:class="classObject">
    </div>
  </div>

Vue实例中，定义classObject的各成员

classObject: {
  active: true,
  red: true,
  blue: true
}

完整示例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <style>
    .active {
      width: 100px;
      height: 100px;
      background: green;
    }

    .red {
      background: red;
    }

    .blue {
      background: blue;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="static" v-bind:class="classObject">
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        classObject: {
          active: true,
          red: true,
          blue: true
        }

      }
    })
  </script>
</body>

</html>

3. 绑定对象的计算属性

语法示例

绑定一个对象

  <div id="app">
    <div v-bind:class="classObject"></div>
  </div>

被绑定对象定义在voe示例的计算属性中

      computed: {
        classObject: function () {
          return {
            base: true,
            active: this.isActive && !this.error.value,
            danger: this.error.value && this.error.type === 'fatal',
          }
        }
      }

完整示例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <style>
    .base {
      width: 100px;
      height: 100px;
    }

    .active {
      background: green;
    }

    .danger {
      background: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <div v-bind:class="classObject"></div>
  </div>
  <script>

    new Vue({
      el: '#app',
      data: {
        isActive: true,
        
        error: {
          value: false,
          type: 'fatal'
        }
      },
      computed: {
        classObject: function () {
          return {
            base: true,
            active: this.isActive && !this.error.value,
            danger: this.error.value && this.error.type === 'fatal',
          }
        }
      }
    })
  </script>
</body>

</html>

结果显示
满足active条件时是绿色方块
满足danger条件时是红色方块

4. 绑定数组

4.1 直接绑定一个数组

语法示例

绑定数组

<div v-bind:class="[activeClass, errorClass]"></div>

在vue实例中定义数组中的数据

      data: {
        activeClass: 'active',
        errorClass: 'text-danger'
      }

完整示例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <style>
    .active {
      width: 100px;
      height: 100px;
      background: green;
    }

    .text-danger {
      background: red;
    }
  </style>
</head>

<body>
  <div id="app">
    <div v-bind:class="[activeClass, errorClass]"></div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        errorClass: 'text-danger'
      }
    })
  </script>
</body>

</html>

4.2 覆盖顺序

和数组顺序无关
和实例中定义值的顺序无关
style中定义顺序有关，相同项写在前边的会被后边的覆盖

因此上例中，如果我们如下写，就会显示绿色

  <style>
    .text-danger {
      background: red;
    }
    .active {
      width: 100px;
      height: 100px;
      background: green;
    }
  </style>

4.3 绑定一个是数组的object

绑定数组的object

  <div id="app">
    <div v-bind:class="myClass"></div>
  </div>

在vue实例中定义数组

      data: {
        myClass: [
        'active',
        'text-danger'
        ]
      }

4.4 控制数组成员是否生效

语法示例

  <div id="app">
    <div v-bind:class="[errorClass ,true ? activeClass : '']"></div>
  </div>

说明：

errorClass 一直存在
activeClass：
true 时，activeClass生效
false时，activeClass不生效。

注意：是否能成功覆盖，和stlye中定义的顺序有关，我们将在后边说明。

完整示例

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW-宋</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <style>
    .text-danger {
      width: 100px;
      height: 100px;
      background: red;
    }
    .active {
      width: 100px;
      height: 100px;
      background: green;
    }
  </style>
</head>

<body>
  <div id="app">
    <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        isActive: false,
        activeClass: 'active',
        errorClass: 'text-danger'
      }
    })
  </script>
</body>

</html>

vue实例中 isActive: false时结果
vue实例中 isActive: true时结果

再次强调顺序

和之前说的一样，数组成员覆盖顺序仍然只和style中的顺序有关

因此，我们如果这样写stlye

    .active {
      width: 100px;
      height: 100px;
      background: green;
    }
    .text-danger {
      width: 100px;
      height: 100px;
      background: red;
    }

即使 activeClass 生效，一样会被 errorClass 的红色覆盖。

玄德公笔记

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue.js基础-06-绑定样式（v-bind）-01-绑定class属性（v-bind:class）

1. class 属性绑定语法示例完整示例2. 属性的覆盖2.1 绑定多个值相互覆盖语法示例完整示例2.2 绑定一个对象（对象成员间覆盖）语法示例完整示例3. 绑定对象的计算属性语法示例完整示例4. 绑定数组4.1 直接绑定一个数组语法示例完整示例4.2 覆盖顺序4.3 绑定一个是数组的object4.4 控制数组成员是否生效语法示例完整示例再次强调顺序...
复制链接

扫一扫