vue之文本渲染
2024-09-21 20:47:19
Vue使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析。
在前面,我们一直使用的是{{}}的形式渲染文本,但是除此方法之外,vue还提供了其他几种常见的文本渲染方式:
- v-text:更新元素的innerText
- v-html:更新元素的innerHTML
- v-once:静态插值
- v-pre:原格式输出
- v-cloak:指令保持在元素上直到关联实例结束编译
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<style>
[v-cloak]{
display: none;
}
</style>
<script src="./vue.js"></script>
</head>
<body>
<!--模板-->
<div id="demo" >
<div >{{message}}</div>
<div v-text="message1"></div>
<div v-html="message2"></div>
<div v-once="message3"></div>
<div v-pre>{{message4}}</div>
<div v-cloak>{{message5}}</div>
</div>
<script>
var demo = new Vue({
el: '#demo',
data: {
message:'文本渲染',
message1:'this is <i>v-text</i>',
message2:'this is <i>v-html</i>',
message3:'this is <i>v-once</i>',
message4:"文本渲染",
message5:"文本渲染"
},
})
</script>
</body>
</html>
在Vue中,我们可以使用{{}}
将数据插入到相应的模板中,这种方法是一种文本插值。使用这种方法,如果网络慢或者JavaScript出错的话,会将{{}}
直接渲染到页面中。值得庆幸的是,Vue还提供了v-text
和v-html
来渲染文本或元素。其中v-text
和{{}}
类似,只是用来渲染文本内容,而v-html
和innerHTML
非常相类,可以将HTML元素渲染;而v-once这个我们在前面的v-on的时候提到过,只能执行一次,所以当数据改变时,插值处的内容不会更新,所以称为静态插值;至于v-cloak之歌指令,经常和css规则一起使用,可以用来隐藏为编译的插值直到实例编译结束,在上面的例子中,若不设置v-cloak样式为隐藏,则会在结束编译之前,一直显示为{{message5}};最后就是v-pre了,这个指令可以在模板中跳过vue的编译,直接输出原始值,也就是不会再输出vue中的data值了,而是直接显示{{message4}}。
最新文章
- ASP.NET MVC 数据库依赖缓存的实现
- php学习01
- C#_批量插入数据到Sqlserver中的四种方式
- BZOJ-2748 音量调节 DP+背包(脑残)
- wamp出现could not execute run action问题
- OD: File Vulnerabilities &; Protocols &; Fuzz
- 第6章 堆排序,d叉堆,优先队列
- 数组-Find Minimum in Rotated Sorted Array
- nginx的sendfile指令的作用
- DTLS 技术要点解析
- Java爬虫——人人网模拟登录
- select中option的onclick事件失效
- OSGi类加载流程
- QML ListView json
- linux kettle
- hdu1256
- ModelSim仿真教程
- kivy中size和pos的使用
- kubebapps 添加私有harbor 中的helm repo
- mysql数据库和oracle数据库之间互相导入备份
热门文章
- C语言--第四周作业评分和总结(5班)
- FZU软工第六次作业-团队选题报告
- 找DEV,欢迎挑战高薪 --方向:互联网金融,地点广州
- LeetCode – All Nodes Distance K in Binary Tree
- vue全家桶+Koa2开发笔记(8)--开发网页
- 彻底理解一致性哈希算法(consistent hashing)
- MySQL Binlog和Relaylog生成和清理
- 项目中更新pip 问题。更新后还是老版本
- 填充整个区间(fill,fill_n,generate和generate_n)
- python之路---10 *args **kwargs 命名空间 作用域 函数的嵌套