1、v-html、v-text、v-model
(1)区别
- v-html 和 v-text 起了插值表达式{{}}的作用,显示对应的数据对象上的值。此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值。
- v-html与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。即html可以识别标签,有xss风险(可以通过html书写病毒,攻击网站) ,text识别不了标签,把标签当做字符串处理。
- {{}}是v-text的简写形式
- v-model 与 v-text、v-html的区别在于它实现表单组件的双向绑定。通常用于表单组件的绑定,例如input,select等,如果用于表单控件以外标签是没有用的。
总结:
- v-html和v-text都是单向绑定;
- v-html能识别标签,v-text只能识别文本;
- v-mode实现双向绑定,用于表单组件的绑定。
(2)举例:
2、 v-if、v-show
- v-if:当隐藏结构时该结构会直接从整个dom树中移除;
- 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适合频繁切换。