宜宾网站建设公司

vue模板插值操作实例代码分析

今天小编给大家分享一下vue模板插值操作实例代码分析的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

专注于为中小企业提供网站设计制作、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业阿克苏免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

vue模板插值操作实例代码分析

模板语法的插值操作

  • v-html 往标签内部插入html文本

  • v-text 往标签内部插入普通文本(解析不了标签)

  • v-pre 在界面上直接展示胡子语法

  • v-cloak 隐藏数据渲染到页面之前，胡子语法在界面上的展示

Mustache

mustache语法就是两个大括号"{{}}" ,mastache语法不仅直接可以写值，也可以写一些简单的表达式。



    
{{counter * 2}}

    
{{message}} kebe

    
{{message + ' ' + firstName + ' ' + lastName}}

    
{{message}}{{firstName}}{{lastName}}

    
{{message}} {{firstName}} {{lastName}}

v-once

作用为定义它的元素或者组件只会渲染一次，在修改变量中的值时，页面的值并不发生改变。


    
未加v-once指令:{{message}}

    加v-once指令:{{message}}

效果图：
vue模板插值操作实例代码分析

v-html

v-html指令会将后端返回的数据以html代码的方式插入，而不是文本方式插入。


    
{{url}}

    

效果图：
vue模板插值操作实例代码分析

v-text

将输入以文本的方式插入标签中，与mustache相似，但是该指令不常使用，原因在于v-text无法进行字符串拼接。


    
{{message}},kebe

    kebe

效果图：
vue模板插值操作实例代码分析

v-pre

该指令会告诉vue将标签中的表达式/文本不要解析，原封不动的展示出来，例如写mustache语法时，vue会将变量的值解析出来插入标签中，那如果我要将mustache语法以文档的方式显示在页面呢？答案就是用v-pre。



    
{{message}}

    {{message}}

效果图：
vue模板插值操作实例代码分析

v-cloak

在浏览器渲染html时，如果vue请求后端网络延时，数据无法及时返回并赋值于变量，那么浏览器无法显示变量的值，就会将mustache语法当作文本显示在页面中。v-cloak指令在vue进行解析时，会把它去掉，也就是说我们可以先使用v-cloak属性将标签隐藏起来，在vue解析时，自动去掉v-cloak，标签就会显示出来，这时标签中包含的变量是有值的。因此不会出现因网络延迟造成直接显示表达式的问题，从而提高用户体验。然而，这个指令后续也不常用，因为在实际开发中，vue页面的模板会被渲染成函数，真正使用的其实是虚拟DOM，因此不会存在这种情况。


    
    
        
{{message}}

        {{message}}
    

效果图：

没有加v-cloak属性的标签，在延时时直接显示表达式

加v-cloak属性的标签会隐藏掉

vue模板插值操作实例代码分析
有v-cloak的标签，当vue解析时去掉v-cloak，标签显示，值显示

没有v-cloak的标签，vue解析时，给表达式赋值，显示的表达式变为具体的值

vue模板插值操作实例代码分析

以上就是“vue模板插值操作实例代码分析”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。


网站名称：vue模板插值操作实例代码分析
当前路径：http://hbruida.cn/article/gicdhe.html

其他资讯