Vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。

在前面，我们一直使用的是{{}}的形式渲染文本，但是除此方法之外，vue还提供了其他几种常见的文本渲染方式：

  • v-text：更新元素的innerText
  • v-html：更新元素的innerHTML
  • v-once：静态插值
  • v-pre：原格式输出
  • v-cloak：指令保持在元素上直到关联实例结束编译
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue</title>
  6.     <style>
  7.         [v-cloak]{
  8.             display: none;
  9.         }
  10.     </style>
  11.     <script src="./vue.js"></script>
  12. </head>
  13. <body>
  14.     <!--模板-->
  15.     <div id="demo" >
  16.         <div >{{message}}</div>
  17.         <div v-text="message1"></div>
  18.         <div v-html="message2"></div>
  19.         <div v-once="message3"></div>
  20.         <div v-pre>{{message4}}</div>
  21.         <div v-cloak>{{message5}}</div>
  22.     </div>
  23.     <script>
  24.     var demo = new Vue({
  25.               el: '#demo',
  26.               data: {
  27.                 message:'文本渲染',
  28.                  message1:'this is <i>v-text</i>',
  29.                 message2:'this is  <i>v-html</i>',
  30.                 message3:'this is <i>v-once</i>',
  31.                 message4:"文本渲染",
  32.                 message5:"文本渲染"
  33.            },
  34.         })
  35.     </script>
  36. </body>
  37. </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之文本渲染的更多相关文章

  1. Egg + Vue 服务端渲染工程化实现

    在实现 egg + vue 服务端渲染工程化实现之前,我们先来看看前面两篇关于Webpack构建和Egg的文章: 在 Webpack工程化解决方案easywebpack 文章中我们提到了基于 Vue ...

  2. Vue-Vue文本渲染三种方法 {{}}、v-html、v-text

    {{ }} 将元素当成纯文本输出 v-htmlv-html会将元素当成HTML标签解析后输出 v-textv-text会将元素当成纯文本输出 代码: <!DOCTYPE html> < ...

  3. vue2.0 之文本渲染-v-html、v-text

    vue2.0 之文本渲染-v-html.v-text 1.index.html代码 <!DOCTYPE html> <html> <head> <meta c ...

  4. Cocos2d-x 文本渲染

     文本渲染: CCLabelAtlas.CCLabelBMFont.CCLabelTTF类都是继承 CCLabelProtocol类,即能够使用系统字,也能够自己定义渲染字体. CCLabelAtla ...

  5. 【JAVASCRIPT】React入门学习-文本渲染

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 文本渲染 1. 纯文本渲染 <!DOCTYPE html> <html> <head&g ...

  6. vue + element 动态渲染、移除表单并添加验证

    博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...

  7. Vue(服务端渲染)

    一.前言 1.服务端渲染图解                                                 2.简介服务端渲染                             ...

  8. vue单位文本控件与vue加密文本控件

    vue单位文本控件: 使用方式: npm install dami-text-input --save 使用: <text-input v-model="test" :uni ...

  9. vue+富文本编辑器UEditor

    vue+富文本编辑器UEditor 昨天的需求是把textarea换成富文本编辑器的形式, 网上找了几种富文本编辑器ueditor.tinymce等, 觉得ueditor实现双向绑定还挺有意思, 分享 ...

随机推荐

  1. djangorestful framework (三)学习

    十.分页器 -简单分页: -from rest_framework.pagination import PageNumberPagination -生成一个对象 -调用对象的.page.paginat ...

  2. java 彻底理解 byte char short int float long double

    遇到过很多关于 数值类型范围的问题了,在这做一个总结,我们可以从多方面理解不同数值类型的所能表示的数值范围 在这里我们只谈论 java中的数值类型 首先说byte: 这段是摘自jdk中 Byte.ja ...

  3. Spring通知方法错误

    错误提示,主要最后一句话    ,花了2个小时 org.springframework.beans.factory.BeanCreationException: Error creating bean ...

  4. 数据库连接池——C3P0

    定义: 本质上就是个容器(集合)存放数据库连接的容器.当系统初始化以后,容器被创建,容器中就会申请一些连接对象.当用户来访问的数据库的时候,从容器中取连接对象,用户用完之后归还. 使用方法: 标准接口 ...

  5. .NET本质论 组件

    模块定义 CLR程序存在模块(module)中.一个CLR模块是一个字节流,通常作为一个文件存储在本地的文件系统中或者Web服务器上 CLR模块采用Windows NT的PE/COFF可执行文件格式的 ...

  6. PHP 获取上月，本月，近15天，近30天日期

    <?php //echo $_SERVER['PHP_SELF']; //define('ROOT_PATH',str_replace($_SERVER['PHP_SELF'],'',str_r ...

  7. 在CentOS 6上使用 AWStats 分析 httpd 和 Tomcat 日志

    准备工作: Awstats 是由perl语言编写的,所以要首先准备好awstats的运行环境.# yum install –y perl*   Apache 一.首先,要安装apache服务器,并且启 ...

  8. 腾讯云 COS 对象存储使用

    目前使用腾讯云的对象存储cos服务,将本地的文件同步到cos中,看了腾讯云的用户文档,发现使用COS Migration 工具还是挺适合的. 原因 因为服务器已经安装有java环境,而cos的几个用户 ...

  9. 原生JavaScript实现跨域

    为什么需要跨域呢?这是因为我们一般的请求都是使用xhr的,但是它只能调用同一个域里面的接口,有时候,我们想要在自己的站点中调用其他站点的接口,这时候就要用到跨域了.其实,跨域并不难,我们可以通过Jav ...

  10. 怎么检测浏览器有没有flash播放器

    虽然现在大多浏览器都支持了HTML5的新特性,可以直接在网页上播放视频,通过<video>标签即可,但是大多数的浏览器对H5支持还是不够完整,或者很多用户还没有把浏览器升级到最新的版本,尤 ...