44、 v-if、v-show 和 v-html、v-text、v-model

1、v-html、v-text、v-model

（1）区别

1. v-html 和 v-text 起了插值表达式{{}}的作用，显示对应的数据对象上的值。此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。
2. v-html与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。即html可以识别标签,有xss风险(可以通过html书写病毒，攻击网站) ，text识别不了标签，把标签当做字符串处理。
3. {{}}是v-text的简写形式
4. v-model 与 v-text、v-html的区别在于它实现表单组件的双向绑定。通常用于表单组件的绑定，例如input，select等，如果用于表单控件以外标签是没有用的。

总结：

1. v-html和v-text都是单向绑定；
2. v-html能识别标签，v-text只能识别文本；
3. v-mode实现双向绑定，用于表单组件的绑定。

（2）举例：

2、 v-if、v-show

1. v-if：当隐藏结构时该结构会直接从整个dom树中移除；
2. v-show：当隐藏结构时是在该结构的style中加上display:none，结构依然保留。

• 手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
• 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
• 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下，无论首次条件是否为真，都被编译，然后被缓存，而且DOM元素保留；
• 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
• 使用场景：v-if组件中某块内容只会显示或隐藏不会被再次改变显示状态；v-show适合频繁切换。