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”指令。

以上就是文本插值与文本渲染指令的见解，如有问题请联系小编！