操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

1️⃣ 绑定 Class

<template>
  <div id="app">
    <!-- 我们可以传给 v-bind:class 一个对象，以动态地切换 class -->
    <div :class="{ 'class-name': show }"></div>        
        <div :class="{ 'class-name': show, 'class-name': show }"></div>    
        <div :class="{ 'class-name': show === true }"></div>
    <!-- 我们可以把一个数组传给 v-bind:class，以应用一个 class 列表 -->
    <div :class="[classA, classB]"></div>
    <!-- 在数组语法中可以使用三元表达式来切换 class -->
    <div :class="[show ? classA : classB]"></div>
    <!-- 在数组语法中可以使用对象语法 -->
    <div :class="[classA, { showB: classB, showC: classC }]"></div>
    <!-- v-bind:class 可以与普通 class 共存 -->
    <div class="className" :class="classA"></div>
    <div :class="['className', classA]"></div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      show: false,
      classA: "class-a",
      classB: "class-b",
    };
  },
};
</script>

1️⃣ 绑定 Style

<template>
  <div id="app">
    <!-- 变量 -->
    <div :style="{ color: black }"></div>
    <div :style="{ fontSize: num + 'px' }"></div>
    <!-- 三元运算符 -->
    <div :style="{ color: show ? '#ccc' : '#ddd' }"></div>
    <!-- 样式对象 -->
    <div :style="styleObj1"></div>
    <!-- 样式数组 -->
    <div :style="[styleObj1, styleObj2]"></div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      black: "#000",
      num: 20,
      show: false,
      styleObj1: {
        color: "#fff",
      },
      styleObj2: {
        width: "100px",
      },
    };
  },
};
</script>

2️⃣ 自动添加前缀

绑定 style 时，使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
多重值

  1. 从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值:
  2. 这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

<template>
<div id="app">
  <div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
  </div>
</template>
<script>
  export default {
    name: "App",
    data() {
      return {};
    },
  };
</script>

1️⃣ v-bind 指令修饰符

修饰符 (modifier) 是以英文句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

2️⃣ .camel

由于绑定特性时，会将大写字母转换为小写字母，如：

  1. Vue 提供了 v-bind 修饰符 camel，该修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化，例如 SVG 的 viewBox 属性

<template>
  <div id="app">
    <!-- 最终渲染的结果为：<svg viewbox="0 0 100 100"></svg> -->
    <svg :viewBox="viewBox"></svg>
    <!-- 最终渲染的结果为：<svg viewBox="0 0 100 100"></svg> -->
    <svg :view-box.camel="viewBox"></svg>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      viewBox: "0 0 100 100",
    };
  },
};
</script>

2️⃣ .prop

被用于绑定 DOM 属性 (property)

<template>
<div id="app">
  <div v-text="txt"></div>
  <!-- 效果同 v-text -->
  <div :text-content.prop="txt"></div>
  </div>
</template>
<script>
  export default {
    name: "App",
    data() {
      return {
        txt: "可以绑定DOM属性",
      };
    },
  };
</script>

2️⃣ .sync