当前位置：首页 > article >正文

Vue:class与style绑定

article 2025/3/15 0:14:11

Vue:class与style绑定

2.6.1 class绑定

1、绑定字符串

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Class绑定之字符串形式</title>
    <script src="../js/vue.js"></script>
    <style>
      .static {
        border: 1px solid black;
        background-color: aquamarine;
      }
      .big {
        width: 200px;
        height: 200px;
      }
      .small {
        width: 100px;
        height: 100px;
      }
      .red-border {
        border-color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      <!-- 静态写法 -->
      <div class="static small">{{msg}}</div>
      <hr />
      <!-- 动态写法：动静都有 -->
      <!-- 适用场景：如果确定动态绑定的样式个数只有1个，但是名字不确定。 -->
      <div class="static" :class="c1">{{msg}}</div>
      <button @click="changeBig">变大</button>
      <button @click="changeSmall">变小</button>
      <button @click="addRedBorder">添加红色边框</button>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "Class绑定之字符串形式",
          c1: "small",
          hasRedBorder: false
        },
        methods: {
          changeBig() {
            this.c1 = "big";
          },
          changeSmall() {
            this.c1 = "small";
          },
          addRedBorder() {
            if (this.hasRedBorder) {
              this.c1 = this.c1.replace(' red-border', '');
            } else {
              this.c1 += ' red-border';
            }
            this.hasRedBorder = !this.hasRedBorder;
          }
        },
      });
    </script>
  </body>
</html>

2、绑定数组

适用于绑定的样式名字不确定，并且个数也不确定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Class绑定之数组形式</title>
    <script src="../js/vue.js"></script>
    <style>
      .static {
        border: 1px solid black;
        width: 100px;
        height: 100px;
      }
      .active {
        background-color: green;
      }
      .text-danger {
        color: red;
      }
      .rounded {
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      <!-- 静态写法 -->
      <div class="static active text-danger">{{msg}}</div>
      <br />
      <!-- 动态写法：动静结合 -->
      <div class="static" :class="['active','text-danger']">{{msg}}</div>
      <br />
      <div class="static" :class="[c1, c2]">{{msg}}</div>
      <br />
      <!-- 适用场景：当样式的个数不确定，并且样式的名字也不确定的时候，可以采用数组形式。 -->
      <div class="static" :class="classArray">{{msg}}</div>
      <button @click="toggleRounded">切换圆角</button>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "Class绑定之数组形式",
          c1: "active",
          c2: "text-danger",
          classArray: ["active", "text-danger"],
          hasRounded: false
        },
        methods: {
          toggleRounded() {
            if (this.hasRounded) {
              this.classArray = this.classArray.filter(item => item!== 'rounded');
            } else {
              this.classArray.push('rounded');
            }
            this.hasRounded = !this.hasRounded;
          }
        }
      });
    </script>
  </body>
</html>

3、绑定对象

适用于样式名字和个数都确定，但是要动态决定用或者不用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Class绑定之对象形式</title>
    <script src="../js/vue.js"></script>
    <style>
      .static {
        border: 1px solid black;
        width: 100px;
        height: 100px;
      }
      .active {
        background-color: green;
      }
      .text-danger {
        color: red;
      }
      .shadow {
        box-shadow: 5px 5px 5px gray;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      <!-- 动态写法：动静结合 -->
      <!-- 对象形式的适用场景：样式的个数是固定的，样式的名字也是固定的，但是需要动态的决定样式用还是不用。 -->
      <div class="static" :class="classObj">{{msg}}</div>
      <br />
      <div class="static" :class="{active:true,'text-danger':false}">{{msg}}</div>
      <button @click="toggleShadow">切换阴影</button>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "Class绑定之对象形式",
          classObj: {
            // 该对象中属性的名字必须和css中样式名一致。
            active: false,
            "text-danger": true,
            shadow: false
          }
        },
        methods: {
          toggleShadow() {
            this.classObj.shadow = !this.classObj.shadow;
          }
        }
      });
    </script>
  </body>
</html>

2.6.2 style绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Style绑定</title>
    <script src="../js/vue.js"></script>
    <style>
      .static {
        border: 1px solid black;
        width: 100px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      <!-- 静态写法 -->
      <div class="static" style="background-color: green">静态写法</div>
      <br />
      <!-- 动态写法：字符串形式 -->
      <div class="static" :style="myStyle">动态写法：字符串形式</div>
      <br />
      <!-- 动态写法：对象形式 -->
      <div class="static" :style="{'background-color': 'gray'}">动态写法1：对象形式</div>
      <br />
      <div class="static" :style="styleObj1">动态写法2：对象形式</div>
      <br />
      <!-- 动态写法：数组形式 -->
      <div class="static" :style="styleArray">动态写法：数组形式</div>
      <button @click="changeFontSize">改变字体大小</button>
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "Style绑定",
          myStyle: "background-color: gray;",
          styleObj1: {
            backgroundColor: "green",
            fontSize: '16px'
          },
          styleArray: [{ backgroundColor: "green" }, { color: "red" }],
          currentFontSize: 16
        },
        methods: {
          changeFontSize() {
            this.currentFontSize += 2;
            this.styleObj1.fontSize = `${this.currentFontSize}px`;
          }
        }
      });
    </script>
  </body>
</html>