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. SQL-常用命令

    1.基本概念 SQL(Structured Query Language)结构化查询语言:一种对数据库进行操作的语言. DBMS:数据库管理系统. MySQL:一个数据库管理系统. 约束值:通过对表的 ...

  2. （3）HTML常用标签 + 快捷字符

    1.<meta charset="UTF-8">  #定义字符编码 2.<!doctype + 类型> #规定文档类型 3.<!-- 注释 --> ...

  3. 浅谈log4j-3-不同输出样式

    public static void main(String[] args) { Logger logger=Logger.getLogger(Appendable.class); //设置输出等级 ...

  4. LA3641 Leonardo's Notebook

    题意 PDF 分析 给出一个26个大写字母的置换B,是否存在A^2 = B 每个置换可以看做若干个循环的乘积.我们可以把这些循环看成中UVa 10294的项链, 循环中的数就相当于项链中的珠子. A^ ...

  5. linux 控制结构

    一.if 注: 格式1.格式2:一个条件一个命令: 格式3:一个条件两个命令: 格式4:两个条件三个命令,注意条件的写法. 例1: #!/bin/sh#ifTest#to show the metho ...

  6. haproxy httpcheck with basic auth

    一个简单的需求,就是需要在 haproxy 的 httpcheck 使用 basic 认证,解决方法 base64 编码username 以及密码 echo -n "my_username: ...

  7. hermes 试用

    hermes 是一个不错的基于kafaka 的event broker,基于push模型(webhook) 测试环境使用docker-compose 运行 环境准备 docker-compose   ...

  8. Power consumption comparison

    Here is my draft evaluation when old MCU replacement for power consumption, the comparsion betwween ...

  9. 【Hi3516】 uboot下烧写BSP

    setenv serverip xx.xx.xx.xx setenv ipaddr xx.xx.xx.xx setenv ethaddr xx:xx:xx:xx:xx:xx setenv netmas ...

  10. ThinkPHP 5.2 出 RC1 版本 RC 是什么意思呢？

    ThinkPHP 5.2 出 RC1 版本 RC 是什么意思呢? RC 的意思是软件候选版本,就是不会有很大的改变,主要还是在除错方面. 来自收集的资料1引用: Alpha:是内部测试版,一般不向外部 ...