vue模板插值操作（总结分享）

本篇文章给大家带来了关于vue的相关知识，其中主要介绍了关于VUE模板插值操作的相关问题，其中包括了mustache、v-once、v-html、v-text等等内容，下面一起来看一下，希望对大家有帮助。

前端（vue）入门到精通课程：进入学习
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具：点击使用

模板语法的插值操作

v-html 往标签内部插入html文本
v-text 往标签内部插入普通文本(解析不了标签)
v-pre 在界面上直接展示胡子语法
v-cloak 隐藏数据渲染到页面之前，胡子语法在界面上的展示

Mustache

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

<body><div id="app" ><h1>{{counter * 2}}</h1><h1>{{message}} kebe</h1><h1>{{message + ' ' + firstName + ' ' + lastName}}</h1><h1>{{message}}{{firstName}}{{lastName}}</h1><h1>{{message}} {{firstName}} {{lastName}}</h1></div><script src="./js/vue.js"></script><script>const app = new Vue({el: "#app", //用户挂载要管理的元素 data:{ //定义数据counter: 100,message: '你好！',firstName: 'kebe',lastName: 'bryant'}})</script></body>
登录后复制

v-once

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

<div id="app" ><h1>未加v-once指令:{{message}}</h1><h1 v-once >加v-once指令:{{message}}</h1></div><script src="./js/vue.js"></script><script>const app = new Vue({el: "#app", //用户挂载要管理的元素 data:{ //定义数据message: '你好！'}})</script>
登录后复制

效果图：
在这里插入图片描述

v-html

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

<div id="app" ><h1>{{url}}</h1><h1 v-html="url" ></h1></div><script src="./js/vue.js"></script><script>const app = new Vue({el: "#app", //用户挂载要管理的元素 data:{ //定义数据url: '<a href="http://www.baidu.com">百度一下</a>'}})</script>
登录后复制

效果图：
在这里插入图片描述

v-text

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

<div id="app" ><h1>{{message}},kebe</h1><h1 v-text="message">kebe</h1></div><script src="./js/vue.js"></script><script>const app = new Vue({el: "#app", //用户挂载要管理的元素 data:{ //定义数据message: '你好！'}})</script>
登录后复制

效果图：
在这里插入图片描述

v-pre

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

<body><div id="app" ><h1>{{message}}</h1><h1 v-pre >{{message}}</h1></div><script src="./js/vue.js"></script><script>const app = new Vue({el: "#app", //用户挂载要管理的元素 data:{ //定义数据message: '你好！'}})</script></body>
登录后复制

效果图：
在这里插入图片描述

v-cloak

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

<body><style>/* 将有带有v-cloak属性的标签隐藏起来*/[v-cloak]{display: none;}</style><div id="app" ><h1>{{message}}</h1><h1 v-cloak >{{message}}</h1></div><script src="./js/vue.js"></script><script>//延时1秒，模拟网络超时，数据无法及时插入setTimeout(function(){//vue解析时去掉v-cloak属性，标签显示const app = new Vue({el: "#app", //用户挂载要管理的元素 data:{ //定义数据message: '你好！'}})},1000)</script></body>
登录后复制

效果图：

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

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

在这里插入图片描述
有v-cloak的标签，当vue解析时去掉v-cloak，标签显示，值显示

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

在这里插入图片描述

【相关推荐：javascript视频教程、web前端】

以上就是vue模板插值操作（总结分享）的详细内容，更多请关注php中文网其它相关文章！

{{item.like > 0 ? item.like : '点赞'}} {{item.comment_content_show ? '取消' : '回复'}} 删除

回帖

{{reply.like > 0 ? reply.like : '点赞'}} {{reply.comment_content_show ? '取消' : '回复'}} 删除

收起