vue模板的插值操作包括哪些，是怎样的
模板语法的插值操作
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解析时，给表达式赋值，显示的表达式变为具体的值
到此这篇关于“vue模板的插值操作包括哪些，是怎样的”的文章就介绍到这了，感谢各位的阅读，更多相关vue模板的插值操作包括哪些，是怎样的内容，欢迎关注网络资讯频道，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： vue模板的插值操作包括哪些，是怎样的
本文地址： https://pptw.com/jishu/652445.html