常用指令列表
- v-model
- v-if
- v-else
- v-show
- v-for
- v-bind----简写: :class="qq"、:type="text"
- 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>
