二、Vue指令

一、文本指令

1. v-text

不能解析html语法的文本，会原样实处。

2. v-html

不能解析html语法的文本。

3. v-once

处理的标签的内容只能被解析一次。

{{ msg }}

二、事件指令

1. 语法

v-on:事件名=‘方法变量’

@事件名=‘方法变量’

2. 同一标签绑定多个事件

鼠标事件示例

<p @mouseover="f1" @mouseout="f2">{{ action }}

3. 给绑定事件传参

a. 不加括号默认传事件对象：$event

b. 加括号表示自己传参，系统不自动传事件对象，可以手动传入事件。

<p @click="f1($event, 'a')">{{ action }}

三、属性指令

1. 语法

v-bind:属性名=‘变量’

：属性名=‘变量’

2. class属性绑定方法

a. 变量的值就是类名

b. 多类名可以用[ ],采用多个变量来控制

c. 选择器可设置为常量

d. {类名：布尔值}控制某类名是否起作用

</p

3. 调整class属性示例

>

<p :class="['d1', {d2: is_true}]" @click="is_true = !is_true">

4. style属性绑定方式1

样式属性

5. style属性绑定方式2

样式属性

四、表单指令

1. 语法

v-model=‘变量’

2. 特点

a. v-model可实现数据的双向绑定，v-model绑定的变量值可以影响表单标签的值，
反过来单标签的值也可以影响变量的值。

b. 在选择框中，v-model能确定选择的初始值。

3. v-model关联input框

4. 在单选框中的应用（value）

男：
女：
{{ v1 }}

---

5. 在单一复选框中的应用（布尔值）

卖身契：同意

---

提交

6. 在多复选框中的应用（数组）

性别：

男：
女：
其他：
{{ v1 }}

五、条件指令

1. 语法

a. v-show=‘布尔变量’

b. v-if=‘布尔变量’

2. 特点

a. 用v-show隐藏时，采用display：none进行渲染。

b. 用v-if隐藏时，不在页面中渲染。

3. 修改v-if参数调整显示的内容

4. 用button按钮选择颜色

<button @click="page='r_page'" :class="{active: page === 'r_page'}">红
<button @click="page='b_page'" :class="{active: page === 'b_page'}">蓝
<button @click="page='g_page'" :class="{active: page === 'g_page'}">绿

六、循环指令

1. 语法

v-for='ele in string|array|obj'

2. 遍历字符串、数组及对象

{{ i }}: {{ c }}

---

{{ e }}

---

{{ v }}

---

{{ i }}-{{ k }}: {{ v }}

---

3. for循环嵌套

| {{ k }}:{{ v }}