vue模板插值操作
模板语法的插值操作
-
v-html 往标签内部插入html文本
-
v-text 往标签内部插入普通文本(解析不了标签)
-
v-pre 在界面上直接展示胡子语法
-
v-cloak 隐藏数据渲染到页面之前,胡子语法在界面上的展示
Mustache
mustache语法就是两个大括号"{{}}" ,mastache语法不仅直接可以写值,也可以写一些简单的表达式。
<body>
<div >
<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="https://www.swvq.com/vuejs/js/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //用户挂载要管理的元素
data:{ //定义数据
counter: 100,
message: '你好!',
firstName: 'kebe',
lastName: 'bryant'
}
})
</script>
</body>
v-once
作用为定义它的元素或者组件只会渲染一次,在修改变量中的值时,页面的值并不发生改变。
<div >
<h1>未加v-once指令:{{message}}</h1>
<h1 v-once >加v-once指令:{{message}}</h1>
</div>
<script src="https://www.swvq.com/vuejs/js/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //用户挂载要管理的元素
data:{ //定义数据
message: '你好!'
}
})
</script>
效果图:
v-html
v-html指令会将后端返回的数据以html代码的方式插入,而不是文本方式插入。
<div >
<h1>{{url}}</h1>
<h1 v-html="url" ></h1>
</div>
<script src="https://www.swvq.com/vuejs/js/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //用户挂载要管理的元素
data:{ //定义数据
url: '<a href="http://www.百度.com">百度一下</a>'
}
})
</script>
效果图:
v-text
将输入以文本的方式插入标签中,与mustache相似,但是该指令不常使用,原因在于v-text无法进行字符串拼接。
<div >
<h1>{{message}},kebe</h1>
<h1 v-text="message">kebe</h1>
</div>
<script src="https://www.swvq.com/vuejs/js/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //用户挂载要管理的元素
data:{ //定义数据
message: '你好!'
}
})
</script>
效果图:
v-pre
该指令会告诉vue将标签中的表达式/文本不要解析,原封不动的展示出来,例如写mustache语法时,vue会将变量的值解析出来插入标签中,那如果我要将mustache语法以文档的方式显示在页面呢?答案就是用v-pre。
<body>
<div >
<h1>{{message}}</h1>
<h1 v-pre >{{message}}</h1>
</div>
<script src="https://www.swvq.com/vuejs/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 >
<h1>{{message}}</h1>
<h1 v-cloak >{{message}}</h1>
</div>
<script src="https://www.swvq.com/vuejs/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解析时,给表达式赋值,显示的表达式变为具体的值
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfiebe
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01