vue之文本渲染
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}}。
vue之文本渲染的更多相关文章
- Egg + Vue 服务端渲染工程化实现
在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...
- Vue-Vue文本渲染三种方法 {{}}、v-html、v-text
{{ }} 将元素当成纯文本输出 v-htmlv-html会将元素当成HTML标签解析后输出 v-textv-text会将元素当成纯文本输出 代码: <!DOCTYPE html> < ...
- vue2.0 之文本渲染-v-html、v-text
vue2.0 之文本渲染-v-html.v-text 1.index.html代码 <!DOCTYPE html> <html> <head> <meta c ...
- Cocos2d-x 文本渲染
文本渲染: CCLabelAtlas.CCLabelBMFont.CCLabelTTF类都是继承 CCLabelProtocol类,即能够使用系统字,也能够自己定义渲染字体. CCLabelAtla ...
- 【JAVASCRIPT】React入门学习-文本渲染
摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 文本渲染 1. 纯文本渲染 <!DOCTYPE html> <html> <head&g ...
- vue + element 动态渲染、移除表单并添加验证
博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...
- Vue(服务端渲染)
一.前言 1.服务端渲染图解 2.简介服务端渲染 ...
- vue单位文本控件与vue加密文本控件
vue单位文本控件: 使用方式: npm install dami-text-input --save 使用: <text-input v-model="test" :uni ...
- vue+富文本编辑器UEditor
vue+富文本编辑器UEditor 昨天的需求是把textarea换成富文本编辑器的形式, 网上找了几种富文本编辑器ueditor.tinymce等, 觉得ueditor实现双向绑定还挺有意思, 分享 ...
随机推荐
- Example [mybatis] 的用法
example.or() .andField1EqualTo() .andField2IsNull(); example.or() .andField3NotEqualTo() .andField4I ...
- Go Example--原子计数器
package main import ( "fmt" "runtime" "sync/atomic" "time" ) ...
- LG4980 【模板】Polya定理
题意 题目描述 给定一个$n$个点,$n$条边的环,有$n$种颜色,给每个顶点染色,问有多少种本质不同的染色方案,答案对$10^9+7$取模 注意本题的本质不同,定义为:只需要不能通过旋转与别的染色方 ...
- centos7安装terminator
用惯了terminator再用系统自带的终端,发现很不习惯不能快速分屏,于是琢磨着给centos7安装terminator 方法一:rpm安装 首先,下载rpm包 wget -c http://li. ...
- MySQL Disk--SSD和HDD的性能
========================================================= 机械硬盘的性能 7200转/分的STAT硬盘平均物理寻道时间是9ms 10000转/ ...
- day1 python学习
Python的分类 编译型:一次性,将全部程序编译成二进制文件,然后再运行. 有点:执行效率高 缺点:开发效率低,不能跨平台使用. 解释型:当你程序运行时,一行一行的解释,并运行 优点:开发效率高,可 ...
- C# 自动升级
自动更新的软件的目的在于让客户不在为了寻找最新软件花费时间.也不用去到开发商的网站上查找.客户端的软件自动会在程序启动前查找服务器上最新的版本.和自己当前软件的版本比较,如果服务器的是最新版本.客户端 ...
- LoadRunner 压测场景制定以及报告分析
这里,我们利用 LoadRunner 来制定场景,且以测试 tps 值为导向,主要介绍手工场景 单服务器的业务请求处理能力 tps 值在 10~200 是合理的:如果是访问单接口不走关系型数据库的,访 ...
- mydumper安装、原理介绍
一.安装 安装依赖包: yum install glib2-devel mysql-devel zlib-devel pcre-devel openssl-devel cmake 下载二进制包: ...
- sql server 附加只有mdf的数据库文件
有时候SQL Server意外断电会导致SQL Server的ldf日志文件丢失或者损坏,这个时候你如果直接附加mdf文件到SQL Server会失败,这里提供一个方法可以还原只有mdf的数据库文件, ...