怎样在 Vue 里面绑定样式属性 ?

在 Vue 里绑定样式属性可以使用 v-bind:class="" 和 v-bind:style="" , 二者都可以接受变量 / 数组 / 对象. 不同点是 v-bind:class 里面绑定变量的值是 class , 指向对应的 类选择器样式表, 而 v-bind:style 里面绑定的变量的值是一个以 css 属性名为键名, 以 css 属性值为键值 的 键值对, 这种键值对需要以对象的形式传进去, 也可以使用数组将多个 样式表对象 传进去. 以下简单展示了两种使用方法实现同样效果.

:class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <title>Vue Test</title>
  <style>
      .style1 {
          width: 100px; height: 100px; background-color: tomato;
      }
      .style2 {
          margin: 0 auto;
          border-radius: 15px;
      }
  </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="{style1,style2}"></div>
    </div>
    <script>
        var vApp = new Vue({
            el: "#app",
            data: {
                style1: "style1",
                style2: "style2"
            }
        })
    </script>
</body>
</html>

:style

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <title>Vue Test</title>
  <style>
      .style1 {
          width: 100px; height: 100px; background-color: tomato;
      }
      .style2 {
          margin: 0 auto;
          border-radius: 15px;
      }
  </style>
</head>
<body>
    <div id="app">
        <div v-bind:style="[style1,style2]"></div>
    </div>
    <script>
        var vApp = new Vue({
            el: "#app",
            data: {
                style1: {
                    "width": "100px",
                    "height": "100px",
                    "background-color": "tomato"
                },
                style2: {
                    "margin": "0 auto",
                    "border-radius": "15px"
                }
            }
        })
    </script>
</body>
</html>

效果

怎样在 Vue 里面绑定样式属性 ?

猜你喜欢