VUE之内置指令②（文本渲染指令VS插值表达式）
文本渲染指令v-text
- 文本渲染指令：
- 这里补充个vue基础指令v-text文本渲染指令，v-text取值为数据data中某项时，便以文本形式渲染到DOM中
- 场景：
- 如果想单纯展示vue对象中的数据，可以使用文本渲染指令v-text
插值表达式{{}}对比v-text
- （1）是否显示虚拟DOM即virtual dom
- 验证后发现两者渲染结果完全一样，页面元素也一样。
- 区别：
- 但是如果你把网速调的很慢会发现，“v-text”这个属性在页面数据加载没完成的时候不会出现“{{ info }}”的现象
- 所以说v-text在解析时不会显示虚拟DOM，而插值表达式则会显示虚拟DOM，如果不想显示则需要借助v-cloak遮罩指令
- （2）是否替换和更新
- 这时候有的人可能提出质疑，有这个了为什么还要用插值表达式{{}}？
- 修改代码如下所示
小结
- 区别：
- 1、编译过程是否显示虚拟DOM
- 2、是否替换和更新,v-texrt
- 场景推荐：
- 1、如果要同时展示用户前台数据，那么就需要用插值表达式，但是不要忘记和“v-cloak”属性一起使用。
- 2、如果只是单独展示Vue对象里的数据，建议使用“v-text”指令。
以上就是文本插值与文本渲染指令的见解，如有问题请联系小编！