vue的常用指令

1.v-text：更新元素的 content text，如果要更新部分的 content text，需要使用{{ content text }}

插值

<div v-text="msg"></div>
<div>{{msg}}</div>

2.v-html

更新元素 innerHTML

<div v-html="html"></div>

3.v-show

根据表达式值的真假，切换元素的 display 属性

<div v-show="true">show time</div>

4.v-if

根据表达式值的真假条件渲染元素

<div v-if="true">hello</div>

5.v-else

前一兄弟必须有 v-if 或 v-else-if

<div v-if="Math.random()" > 0.5">hello</div>
<div v-else>hello vue</div>

6.v-else-if

前一兄弟必须有 v-if 或者 v-else

<div v-if="Math.random() > 0.5">hello<div>
<div v-else-if="Math.random() < 0.5">hello world</div>
<div v-else>hello vue.js</div>

7.v-for

循环渲染元素

<div v-for="for item in items">
{{ item }}
<div>
<div v-for="for (item, index) in items">
{{ index }} : {{ item }}
</div>

8.v-on

绑定事件监听

<div v-on:click="clickme">click</div>
<div @on:click="clickme">click</div>
<div v-on:[event]>click<div>// 动态事件
<div @click.stop="click">click</div>//停止事件冒泡
<div @click.prevent="dosome">click</div>// 阻止默认行为

9.v-bind

动态绑定一个或者多个属性，或一个组件的 prop 到表达式

<div v-bind:background="bg"></div>
<img :src="images" />
<div :class="{bg: isred}"></div>

10.v-model

在表单控件或着组件上创建双向绑定

<input v-model="message" placeholder="input me" />
<div>{{ message }}</div>