vue 入门——Class 与 Style 绑定

  class 和 style 也是 HTML 的属性，因此，也可以使用 v-bind 进行属性值的绑定。

1 Class 绑定

• 基本语法： :class="xxx"

• xxx 表达式，可以是 字符串、对象、数组

  <style>
      .color {
          color: red;
      }
      .font {
          font-size: 200px;
      }
  </style>
  <div id="app">
      <span :class="'color'">{{message}}</span> <br>
      <span :class="color">{{message}}</span> <br>
      <span :class="{color: isColor, font: isFont}">{{message}}</span> <br>
      <span :class="['color','font']">{{message}}</span>
  </div>
  <script>
      // vm  实例
      const vm = new Vue({
          el : '#app', // element
          data : { // model
              message : 'Hello world',
              color: 'color',
              isColor: true,
              isFont: false
          }
      })
  </script>
  

2 Style 绑定

  style 的绑定和普通的属性绑定基本类似，需要注意的是有些中间有横线的样式，需要转换成驼峰形式。另外，和 Class 一样可以使用数组。

<span :style="{color: 'red'}">{{message}}</span>
<span :style="{color: 'red', fontSize: size+'px'}">{{message}}</span>
<script>
    // vm  实例
    const vm = new Vue({
        el : '#app', // element
        data : { // model
            message : 'Hello world',
            color: 'color',
            isColor: true,
            isFont: false,
            size: 18
        }
    })
</script>