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之文本渲染的更多相关文章

  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. HDU2019数列有序!

    Problem Description 有n(n<=100)个整数,已经按照从小到大顺序排列好,现在另外给一个整数x,请将该数插入到序列中,并使新的序列仍然有序. Input 输入数据包含多个测 ...

  2. 环境变量、cp、mv、cat 等命令

    1.环境变量: PATH 个人理解 环境变量,即是所有命令文件所存放的目录,或是人为的定义的目录,(命令文件所存放的目录,当输入一个命令的时候,系统会自动找到且不报错,并不需要输入绝对路径,来运行相关 ...

  3. PTA——四舍五入

    PTA 7-18 出租车计价 (15 分) #include<stdio.h> int main() { double s,w; int t; scanf("%lf %d&quo ...

  4. windows错误：错误0x80070091 目录不是空的

    错误: Window 下目录无法删除,提示 “ 错误0x80070091 目录不是空的 ” 解决: 1.开始菜单>附件>命令提示符>右键>以管理员身份运行 2.删除文件:(如 ...

  5. CentOS7.0防火墙以及开关机命令

    CentOS 7.0默认使用的是firewall作为防火墙 查看防火墙状态firewall-cmd --state 停止firewallsystemctl stop firewalld.service ...

  6. spring模拟ioc

    非spring 开发 public class UserService { private UserDao userDao=new UserDaoImpl(); public void addUser ...

  7. MySQL导出用户权限

    在MySQL 5.5/5.6版本中,使用SHOW GRANTS命令可以导出用户的创建脚本和授权脚本. hostname='127.0.0.1' port= username='root' passwo ...

  8. pushpin 将web services 转换为realtime api 的反向代理工具

    pushpin 是一款反向代理工具,可以将web services 转换为实时的api 参考架构图 包含的特性 透明 无状态 共享nothing 发布&&订阅模型 几种灵活用法 基本使 ...

  9. 使用kompose 快速转换dokcer-compose 文件为k8s deploy 文件

    kompose 是一个不错的快速转换docker-compose 文件为k8s 部署yaml文件的工具,使用次工具我们 可以将简单的docker-compose文件,转换为复杂的yaml文件,对于使用 ...

  10. 5 个关于 API 中日期和时间设计规则

    规则 #1 使用ISO-8601格式作为你的日期格式 ISO 8601 解决了很多问题,包括: 自然排序 - 简单和优雅,免去多余的工作即可实现排序 时区偏移 - 代表用户的地点和时区在日益增长的全球 ...