Vue 指令篇

1. 内置指令

• v-show :

  • 说明：根据条件展示元素,true展示元素，false隐藏元素
  • 版本：vue2,vue3

注意：v-show 不支持写在 template 元素标签上，也不支持同时写在 v-else 标签中

v-show 是采用切换css属性display:block,display:none来控制显示或隐藏dom，所以初始页面render时，此dom就会渲染至页面中，只不过是隐藏状态。

• v-if:

  • 说明：根据条件展示元素,true在dom树中渲染元素，false从dom树中移除元素
  • 版本：vue2,vue3

v-if可以作用于template中，如果表达式为true，那么template标签块中的代码都会渲染，反之都不渲染

v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块

• v-else

  • 说明：表示 v-if 的“else 块”
  • 版本：vue2,vue3

v-else元素必须紧跟在带v-if或者v-else-if的元素的后面，否则它将不会被识别

• v-else-if

  • 说明：表示 v-if 的“else 块”
  • 版本： 2.1.0 新增,vue2,vue3

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

• v-bind

  • 说明：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式
  • 版本：vue2,vue3
  • 缩写：:

a. 绑定一个 attribute

b. class 绑定

c. style 绑定

d. 组件传值

e. 传递当前所有 props

• v-text

  • 说明：更新元素的 textContent
  • 版本：vue2,vue3

• v-html

  • 说明：更新元素的 innerHTML
  • 版本：vue2,vue3

页面展示：

• v-for

  • 说明：遍历数据
  • 版本：vue2,vue3

注意：请不要将 v-for 与 v-if 一起使用，当和 v-if 一起使用时，v-for 的优先级比 v-if 更高，v-for 可以与 v-show 一起使用，如果需要带条件渲染，请考虑使用 computed 属性
最佳建议，在使用 v-for 时，使用 key 属性，来保证内部 diff 算法更新 dom 时最佳优化，不推荐使用 index 属性

页面展示：

• v-model

  • 说明：在表单控件或者组件上创建双向绑定
  • 版本：vue2,vue3

页面展示：