vue指令:v-text,v-html,v-show

指令

1. 指令带有前缀 v-;列表内容
2. 指令需要添加在DOM元素上

常用的指令

v-text
解释:更新元素的 textContent。如果要更新部分的 textContent 为空，需要使用 {{ Mustache }} 插值。
实例:

插值语法接受三元运算符
实例:

v-html
解释:
更新元素的 innerHTML 。
注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代

警告:
1.在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上;
2.在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局 style 元素手动设置类似 BEM 的作用域策略.
实例:

v-show
解释:
根据值的true/false，切换元素的 display CSS 属性。
当条件变化时该指令触发过渡效果。

v-if,v-else-if和v-else
解释:
根据值的true/false,在切换时 元素及它的数据绑定 / 组件被销毁并重建;
如果元素是 ，将提出它的内容作为条件块;
当条件变化时该指令触发过渡效果。

v-else-if:
当 v-if 为 false 时 并且且自身值为 true 时显示

v-else:
前面兄弟元素里必须有 v-if 或 v-else-if
在 v-if 或 v-else-if 的值为false是显示
实例:

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else>
  No A or B
</div>