Vue-常用系统指令v-bind、v-on、v-model、v-for和 key 属性的使用

v-bind

• 该指令可以给 HTML 元素或者组件动态地绑定一个或多个特性，比如：style、class。

  <!-- 绑定的属性的等号右侧值未加引号时会将其作为 vue 实例中的属性解析，加了引号后会将其作为普通字符串使用 -->
  <input type="button" name="" v-bind:value="myType" v-bind:title="msg">
  

• v-bind 指令可简写为 : ，绑定的属性中可以写合法的 JS 代码。

  <input type="button" name="" :value="myType + 'v-bind'" :title="msg">
  

• 绑定 style

  <p :style="styleA">单个行内样式</p>
  <p :style="{
          fontSize: size + 'px'}">对象：可让指令与普通样式属性共存</p>
  <p :style="[styleA, styleB]">数组：绑定一个 行内样式 列表</p>
  

• 绑定 class

  <p :class="classA">单个</p>
  <p :class="[classA, classB]">数组：类选择器列表</p>
  <p :class="{red: flagA}">对象：可判定是否使用选择器（貌似不能使用 data 中的）</p>
  <p :class="[{B: flagA}, classA, flagA? 'white' : '']">对象数组：可判定是否使用非 data 中的选择器（需要加引号）