Vue文本渲染指令v-text

Bertha 。 2023-05-29 05:13 2阅读 0赞

*  文本渲染指令：  
    这里补充个vue基础指令v-text文本渲染指令，v-text取值为数据data中某项时，便以文本形式渲染到DOM中
 *  场景：  
    如果想单纯展示vue对象中的数据，可以使用文本渲染指令v-text  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]

## 插值表达式\{ \{\}\}对比v-text ##

*  （1）是否显示虚拟DOM即virtual dom  
    验证后发现两者渲染结果完全一样，页面元素也一样。
 *  区别：  
    但是如果你把网速调的很慢会发现，“v-text”这个属性在页面数据加载没完成的时候不会出现“\{ \{ info \}\}”的现象  
    所以说v-text在解析时不会显示虚拟DOM，而插值表达式则会显示虚拟DOM，如果不想显示则需要借助v-cloak遮罩指令
 *  （2）是否替换和更新  
    这时候有的人可能提出质疑，有这个了为什么还要用插值表达式\{ \{\}\}？  
    修改代码如下所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]
 *  上图的区别：  
    插值表达式可以把Vue传递过来的数据和前台用户自己定义的数据结合在一起，但是v-text只能显示Vue对象传递过来的数据，会替换掉节点里已有的内容。

## 小结 ##

*  区别：  
    1、编译过程是否显示虚拟DOM  
    2、是否替换和更新,v-texrt
 *  场景推荐：  
    1、如果要同时展示用户前台数据，那么就需要用插值表达式，但是不要忘记和“v-cloak”属性一起使用。  
    2、如果只是单独展示Vue对象里的数据，建议使用“v-text”指令。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191104161102327.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191104161311715.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70