vue绑定class

字符串写法：适用于样式的类名不太确定，需要动态指定的情况。代码中的backgroundColor是变量名数组写法：适用于样式的数量不太确定，名字也不太确定，需要后期动态添加或删减的。对象写法：适用于样式的数量确定，名字确定，但要动态决定用不用。

可乐暴暴子

4482人浏览 · 2023-07-02 10:37:24

可乐暴暴子 · 2023-07-02 10:37:24 发布

1 绑定class样式

绑定class样式采用v-bind来绑定，即v-bind;class="xxx"或者:class="xxx" （有冒号不要忘了，这是简写形式）

1.1 字符串写法

字符串写法顾名思义就是class所绑定的值，在vue中是以字符串的形式存在的

适用于：样式的类名不太确定，需要动态指定。

首先初始化网页的内容，以下给出四种备用样式，名字自取：basic、lightpink、grey、lightblue。

basic作为基础样式，设置了宽高，字体样式，边框样式，以及让字体居中对齐。

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绑定class样式</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <style>
    .basic{
      width: 150px;
      height: 150px;
      font-size: 24px;
      font-weight: 500;
      text-align: center;
      line-height: 150px;
      border: 1px solid #333;
    }
    .lightpink{
      background-color: lightpink;
    }
    .gray{
      background-color: gray;
    }
    .lightblue{
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="basic">
    hello
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
      data: {
        // 具体需要配置的数据
      }
    })
    vm.$mount('.basic');//指定所服务的对象为class=‘basic’的元素
  </script>
</body>

现在要实现class的绑定，例如为div元素挂载lightpink类名，有以下两种写法

第一种是我们最熟悉的写法，class=“basic lightpink”

第二种是使用vue绑定的形式，class=“basic” :class="backgroundColor"

（backgroundColor是变量，里面存放的是lightpink的样式，具体代码在下面那一段文字之后）

两种写法的区别就是，第一种写法中的class数据是固定的，后期不受vue的控制而产生动态变化；第二种写法采用绑定的方式来写，便于vue的管理，在后期需要增加或删减类名时会更加的方便，而不会通过原生的js代码去对类名做增加或删减。所以，对于不变的数据，例如basic，它可以直接写在class里，对于需要后期调整或变化的需要写在:class里，而“:”是v-bing的简写形式，如同v-bind:class=“xxxxx”

具体代码如下：

<body>
  <div class="basic" :class="backgroundColor">
    hello
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
      data: {
        backgroundColor:'lightpink'
      }
    })
    vm.$mount('.basic');
  </script>
</body>

其中:class="backgroundColor"展示的就是class的字符串写法，因为backgroundColor中的值在vue当中是以字符串的形式存在的。若以后要改变class所绑定的值，只需要改变data中backgroundColor的值就行，而不是去使用document.querySelector("xxxx").classList..........这类似的形式去操作class属性，这就方便多了。

最终效果：

在网页当中打开检查，观察元素，可以发现，不管是固定的类名还是绑定的类名，最终还是合并在了一个class里面，如下所示：

通过案例，进一步体会vue当中对class的绑定

要求在以上代码的基础上实现，当鼠标点击时，div的背景色在lightpink、grey、lightblue三者之间随机切换，代码如下：

<body>
  <div class="basic" :class="backgroundColor" @click="bgc">
    hello
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
      data: {
        backgroundColor:'lightpink',
      },
      methods: {
        bgc(){
          const arr = ["lightpink","grey","lightblue"];
          let index = Math.floor(Math.random()*3);
          this.backgroundColor = arr[index];
        }
      },

    })
    vm.$mount('.basic');
  </script>
</body>

div中设置了一个点击事件，具体事件存放在methods对象当中。利用arr将需要参与变化的样式存放在数组里面，后期方便通过改变索引值来选取对应的样式，Math.floor(Math.random()*3)就是生成了0到2的一个随机索引值，this.backgroundColor = arr[index];这一句实现的是，将arr中随机选取到的值赋给backgroundColor，然后将值赋给class当中，影响元素背景色的改变。

实现效果：

1.2 数组写法

字符串写法顾名思义就是class所绑定的值，在vue中是以数组的形式存在的

例如 :class="arr",在vue当中arr实际存储的是["类名1"，“类名2”，“类名3”]

适用于：要绑定的样式个数不确定，名字也不确定，需要后期动态添加或删减的。

数组写法的存在意义是什么，若有一天你写代码的时候，有十几二十多个的样式可供你选择，但是你只选择了其中几个样式，还有那么多种样式你不确定在以后到底用不用得上，这时你就可以选择数组的写法，将你想用的样式的类名存放在数组中，若以后你想添加更多的样式，你就可以使用push()方法增加数组元素，或者用shift（）方法删除数组元素，方便又灵活。

用数组的写法绑定class的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绑定class样式</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <style>
    .basic{
      width: 150px;
      height: 150px;
      text-align: center;
      line-height: 150px;
      border: 1px solid #333;
    }
    .lightpink{
      background-color: lightpink;
    }
    .fcolor{
      color: #ff6600;
    }
    .fsize{
      font-size: 36px;
    }
    .borderR{
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="basic" :class="classArr">
    hello
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
      data: {
        classArr:["lightpink","fcolor","fsize","borderR"],
      }
    })
    vm.$mount('.basic');
  </script>
</body>
</html>

实现效果：

在网页当中打开检查，观察元素的class值，发现凡是数组中有的，在class里面都有：

1.3 对象写法

字符串写法顾名思义就是class所绑定的值，在vue中是以对象的形式存在的

例如 :class="obj",在vue当中obj实际存储的是

{

key1：“xxx”，

key2：“xxx”

}

适用于：要绑定的样式个数确定，名字也确定，并且要动态决定用不用这些样式。

对象写法的存在意义是，当有一天你要写代码，这里有5个已经确定的样式例如style1、style2、style3、style4、style5、，它们的名字也已经确定，要求这五个样式你必须都得用上，但并非同时运用，这时候就可以采取对象写法，于是你将这五个样式都写在了对象里面，如下：

obj：{

style1：false，

style2：false，

style3：false，

style4：true，

style5：true，

}

你将暂时不启用的样式设置为false，将目前要用到的样式设置为true，如果过了一会你要用到style3，那么你就将style3的值设置为true即可。

用对象的写法绑定class的代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绑定class样式</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <style>
    .basic{
      width: 150px;
      height: 150px;
      text-align: center;
      line-height: 150px;
      border: 1px solid #333;
    }
    .lightpink{
      background-color: lightpink;
    }
    .fcolor{
      color: #ff6600;
    }
    .fsize{
      font-size: 36px;
    }
    .fweight{
      font-weight: bold;
    }
    .borderR{
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="basic" :class="classObj">
    hello
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false;
    const vm = new Vue({
      data: {
        classObj:{
          lightpink:true,
          fcolor:false,
          fsize:false,
          fweight:false,
          borderR:false,
        },
      }
    })
    vm.$mount('.basic');
  </script>
</body>
</html>

通过观察可以发现ligthpink值为true，这就意味着网页初始样式需要启用lightpink，其它为false的就暂时不启用。

实现效果，看我依次将这些样式变为true：

来看看class值得变化：

初始：

borderR：true

fcolor：true

fsize：true

fweight：true

1.4 关于class绑定不建议的写法

：class=‘["lightpink","fcolor","fsize","borderR"]’

或者是像这样写

：class="{lightpink:true,fcolor:true,fsize:true,fweight:true,borderR:true}"

虽然这样写最终的效果也没问题，但是这样的写法不灵活，让vue无法对他们进行操作。

1.5 总结

字符串写法：适用于样式的类名不太确定，需要动态指定的情况。代码中的backgroundColor是变量名

<div class="basic" :class="backgroundColor">hello</div>

数组写法：适用于样式的数量不太确定，名字也不太确定，需要后期动态添加或删减的。

<div class="basic" :class="classArr">hello</div>

对象写法：适用于样式的数量确定，名字确定，但要动态决定用不用。

<div class="basic" :class="classObj">hello</div>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

可乐暴暴子

@ead_gbe

已为社区贡献1条内容