6、Vue指令

指令：带有v-前缀的特殊标签属性

（1）v-html

作用：设置元素的innerHTML

语法：v-html=“表达式”

示例：

提供一个地址，这里是百度的地址，通过v-html渲染

结果：

（2）v-show与v-if

1）v-show

  ①作用：控制元素显示与隐藏

  ②语法：v-show=“表达式”，表达式值true显示，false隐藏

  ③原理：切换display：none控制显示器

  ④场景：频繁切换显示隐藏的场景

2）v-if

①作用：控制元素的显示与隐藏（条件渲染）

②语法：v-if=“表达式”，表达式值true显示，false隐藏

③原理：基于条件判断，是否创建或移除元素节点

④场景：要么显示，要么隐藏，不频繁切换的场景

3）区别

当表达式值为true时，无显著区别，当值为false时，v-show通过控制css的display：none来控制显示与隐藏

4）示例

提供一个布尔值和两个盒子

值为true时

值为false时

（3）v-else与v-else-if

①作用：辅助v-if进行渲染判断

②语法：v-else 、 v-else-if=“表达式”

③注意：需要紧挨着v-if一起使用

1）示例

①v-else

代码

结果

②v-else-if

代码

结果：

（4）v-on

1）作用：注册事件=添加监听+提供处理逻辑

2）语法：

①v-on:事件名=“内联语句”

②v-on：事件名=“menthod中的函数名”

3）简写：@事件名

4）示例：

内联：

代码：

结果：

函数：

代码：

结果：

点击“切换显示与隐藏”

5）

利用v-on传参，参数名（）

代码：

结果：

（5）v-bind

1）作用：动态设置html的标签属性->src 、url等

2）语法：v-bind：属性名=“表达式”

3）简写：“：属性名=表达式”

4）示例：

代码：

效果：

（6）v-for

1）作用：基于数据循环，多次渲染整个元素->数组、对象、数字…

2）语法：v-for=”(item,index) in 数组”，item-数组中的每一项，index-数组的下标

3）v-for中的key：

①语法： key属性=“唯一标识”

②作用：给列表项添加唯一标识，便于Vue进行列表项的正确排序复用。

③注意

1. 如果不加key，v-for的默认行为会尝试原地修改元素（就地复用）

2. Key的值只能是字符串或数字类型
3. Key的值必须具有唯一性
4. 推荐使用id作为key，不推荐使用index作为key，（index会变化）

代码：

结果：

（7）v-model

1）作用：给表单元素使用，双向数据绑定->快速获取或设置表单元素内容

（数据变化->视图更新，视图变化->数据更新）

2）语法:v-model=”变量”

3）示例：

代码：

结果：

点登录：

点重置：