嗨!~ 大家好,我是YK菌 🐷 ,一个微系前端 ✨,爱思考,爱总结,爱记录,爱分享 🏹,欢迎关注我呀 😘 ~ [微信号: yk2012yk2012,微信公众号:ykyk2012]

「这是我参与11月更文挑战的第18天,活动详情查看:2021最后一次更文挑战 (opens new window)

在应用界面中, 某个(些)元素的样式是变化的,class/style 绑定就是专门用来实现动态样式效果的技术

# 1. class 绑定

:class='xxx' // xxx可以是字符串、对象、数组。

# 字符串

  1. 表达式是字符串: 'classA'

适用于:类名不确定,要动态获取

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>绑定样式</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }

    .happy {
      border: 4px solid red;
      ;
      background-color: rgba(255, 255, 0, 0.644);
      background: linear-gradient(30deg, yellow, pink, orange, yellow);
    }

    .sad {
      border: 4px dashed rgb(2, 197, 2);
      background-color: gray;
    }

    .normal {
      background-color: skyblue;
    }

  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>

  <!-- 准备好一个容器-->
  <div id="root">
    <!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data: {
      name: 'YK菌',
      mood: 'normal'
    },
    methods: {
      changeMood() {
        const arr = ['happy', 'sad', 'normal']
        const index = Math.floor(Math.random() * 3)
        this.mood = arr[index]
      }
    },
  })
</script>

</html>

GIF 2021-11-18 16-47-58.gif

# 对象

  1. 表达式是对象: {classA:isA, classB: isB}

适用于:要绑定多个样式,个数不确定,名字也不确定

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>绑定样式</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }

    .yk1 {
      background-color: yellowgreen;
    }

    .yk2 {
      font-size: 30px;
      text-shadow: 2px 2px 10px red;
    }

    .yk3 {
      border-radius: 20px;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>

  <!-- 准备好一个容器-->
  <div id="root">

    <!-- 绑定class样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定 -->
    <div class="basic" :class="classArr">{{name}}</div> <br /><br />

  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data: {
      name: 'YK菌',
      classArr: ['yk1', 'yk2', 'yk3']
    },
  })
</script>

</html>

image.png

# 数组

  1. 表达式是数组: ['classA', 'classB']

适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>绑定样式</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }

    .yk1 {
      background-color: yellowgreen;
    }

    .yk2 {
      font-size: 30px;
      text-shadow: 2px 2px 10px red;
    }

    .yk3 {
      border-radius: 20px;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>

  <!-- 准备好一个容器-->
  <div id="root">

    <!-- 绑定class样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用 -->
    <div class="basic" :class="classObj">{{name}}</div>

  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data: {
      name: 'YK菌',
      classObj: {
        yk1: true,
        yk2: false,
        yk3: true
      }
    }
  })
</script>

</html>

image.png

# 2. style 绑定

:style="{ color: activeColor, fontSize: fontSize + 'px' }"

其中 activeColor/fontSize 是 data 属性

:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。

# 对象

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>绑定样式</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>

  <!-- 准备好一个容器-->
  <div id="root">

    <!-- 绑定style样式--对象写法 -->
    <div class="basic" :style="styleObj, styleObj2">{{name}}</div>

  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data: {
      name: 'YK菌',
      styleObj: {
        fontSize: '40px',
        color: 'red',
      },
      styleObj2: {
        backgroundColor: 'orange'
      },
    },
  })
</script>

</html>

image.png

# 数组

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>绑定样式</title>
  <style>
    .basic {
      width: 400px;
      height: 100px;
      border: 1px solid black;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>

<body>

  <!-- 准备好一个容器-->
  <div id="root">

    <!-- 绑定style样式--数组写法 -->
    <div class="basic" :style="styleArr">{{name}}</div>

  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    el: '#root',
    data: {
      name: 'YK菌',
      styleArr: [{
          fontSize: '40px',
          color: 'blue',
        },
        {
          backgroundColor: 'gray'
        }
      ]
    },
  })
</script>

</html>

image.png

最后,欢迎关注我的专栏,和YK菌做好朋友

上次更新: 2022/4/13 12:52:30