常用指令列表

1. v-model
2. v-if
3. v-else
4. v-show
5. v-for
6. v-bind----简写: :class="qq"、:type="text"
7. v-on----简写: @click="qq"

v-model 双向绑定

<input type="text" v-model="message" />
<div> {{ message }} </div>

v-if 条件渲染，根据表达式的真假来删除和插入元素

<div v-if="true">当表达式为true，插入该条数据</div>
<div v-if="false">当表达式为flase，删除该条数据</div>
<div v-if="age >  25">当表达式为true，插入该条数据</div>

v-else 紧跟着v-if，添加一个else块，否则将不会被识别

<div>
<p v-if="a>18">年龄：{{ data.age }}</p>
<p v-else>年龄：属于未成年</p>
</div>

v-show 条件渲染，元素会始终渲染到HTML

<div v-show="true">当表达式为true，显示该条数据</div>
<div v-show="false">当表达式为false，隐藏该条数据</div>
<div v-show="a > 18">当表达式为true，显示该条数据</div>

v-for指令基于一个数组渲染一个列表

<table>
<tr><td>姓名</td><td>年龄</td><td><性别/td></tr>
<tr v-for="persion in people">
    <td>{{ persion.name }}</td>
    <td>{{ persion.age }}</td>
    <td>{{ persion.sex }}</td>
</tr>
</table>

v-bind指令，带一个参数，参数通常是HTML元素的特性

<div v-bind:class="active"></div>
<div :class="active"></div>

v-on指令用于监听DOM事件

<a v-on:click=""doSet></a>
<a @:click=""doSet></a>