Vue（一） 指令 计算属性 组件

一 v-bind命令

1.1 简介

  Vue中动态绑定值的方法常使用Mustache插值语法进行绑定，而绑定属性和组件间通信传值的时候则使用v-bind命令。
  常见的需要动态绑定的属性有
- v-bind:src 图片链接
- v-bind:herf 网页链接
- v-bind:class class绑定
 不过我们常用语法糖的形式简写 如:src="\xxx"

1.2 绑定class

对象语法

用法一：直接通过{}绑定一个类，对象的key前为css属性名称，对象的value可为Boolean值的变量或者具体的属性值。为Boolean值控制属性的展示与否，具体css属性值在样式表内声明为。

<h2 :class="{
    'active': isActive}">Hello World</h2>
<h2 :class="{
    'fontsize': fontsize+'px'}">Hello World</h2>

用法二：作为对象语法，也支持多个对象，传入多个值

<h2 :class="{
    'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突，例如下方如果isActive和isLine都为true，那么会有title/active/line三个类

<h2 class="title" :class="{
    'active': isActive, 'line': isLine}">Hello World