v-cloak v-text  v-html的使用

（1）实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>vue-cloak.v-text.v-html</title>

    <script src="../lib/vue.js"></script>     <!--导入vue.js -->

    <style>

        [v-cloak]{

            display: none;

        }/*设置v-cloak类中的display为none来解决插值表达式的闪烁问题*/

    </style>

</head>

<body>

    <div class="app">

        <h1 v-cloak>++++{{ msg }}-------</h1>

        <!-- 使用插值表达式会有闪烁问题  -->

        <!-- 使用插值表达式可以在前后添加内容，而v-text会覆盖标签内的内容 -->

        <h4 v-text="msg"></h4>

        <!-- 使用v-text没有闪烁问题 -->

        <p v-html="msg2"></p>

        <!-- 使用v-html可以将msg2内容当做html进行输入，同时也会覆盖标签内容 -->

    </div>

    <script>

        var vm = new Vue({

            el:'.app',

            data:{

                msg:'努力学习vue',

                msg2:'<h2>hello world</h2>'

            }

        })

    </script>

</body>

</html>

（2）v-cloak v-text v-html和插值表达式的区别与特点

　　使用插值表达式会有闪烁问题

　　设置v-cloak类中的display为none来解决闪烁问题

　　使用插值表达式可以在前后添加内容，v-text会覆盖标签内容

　　使用v-text没有闪烁问题

　　使用v-html来添加带有html标签的内容，同时也会覆盖原标签的内容

vue.js（2）--v-cloak v-text v-html的更多相关文章

  1. Vue.js+vue-element搭建属于自己的后台管理模板：什么是Vue.js?（一）

    Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...

  2. Vue.js+vue-element搭建属于自己的后台管理模板：更深入了解Vue.js（三）

    前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...

  3. Vue.js（25）之 vue全局配置api介绍

    本文介绍的全局api并不在Vue的构造函数内,而是在Vue构造器外面提供这些方法,让我们扩展新功能. 1. vue.extend(options) 参考:https://www.w3cplus.com ...

  4. 从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. vue.js（1）--创建vue实例的基本结构

    vue实例基本结构与MVVM框架 (1)vue实例基本结构 <!DOCTYPE html> <html lang="en"> <head> &l ...

  7. 从零开始学 Web 之 Vue.js（六）Vue的组件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. vue.js（一）

    之前看过一点vue.js但是知识点没做记录,现在也差不多不记得了,今天把以前看过的翻一遍,顺便提炼一下知识点 注意:下面的所有与vue相关的标签.指令都是写在id="app"的di ...

  9. Web - 前端 Vue.js （1）

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...

  10. vue.js（5）--事件修饰符

    vue中的事件修饰符(.stop..prevent..self..capture..once) (1)实例代码 <!DOCTYPE html> <html lang="en ...

随机推荐

  1. sql server中 设置与查看锁的超时时间(ZT) @@LOCK_TIMEOUT

      在数据库的应用系统中,死锁是不可避免的.通过设置死锁的处理优先级方法,可以在数据库引擎中自动检测到死锁,对发生的死锁会话进行干预,从而达到解除死锁的目点,但在这种情况下,会话只能被动的等待数据库引 ...

  2. 一、基础篇--1.1Java基础-什么是java的序列化和反序列化

     什么是序列化和反序列化 序列化:把堆内存中的java对象数据,通过某种方式把对象存储到磁盘文件或者传递给其他网络节点.这个过程称为序列化.简单来说呢,就是将对象转换成二进流的过程. 反序列化:把磁盘 ...

  3. java导入导出下载Excel,xls文件(带下拉框)

    /** * 导入excel文件 * 2014-7-23 * @return */ @RequiresPermissions("plug:product:caiwu:upload") ...

  4. golang context学习记录1

    1.前言 一个请求,可能涉及多个API调用,多个goroutine,如何在多个API 之间,以及多个goroutine之间协作和传递信息,就是一个问题. 比如一个网络请求Request,需要开启一些g ...

  5. golang入门案例之http client请求

    发请求,接收接送,并解析 package main import ( "fmt" "net/http" "io/ioutil" " ...

  6. 阶段3 3.SpringMVC·_02.参数绑定及自定义类型转换_2 请求参数绑定实体类型

    参数封装到javaBean对象中 创建新的包domain.在下面新建Account 实现序列化 的接口,定义几个属性 生成get和set.还有toString的方法 表单 重新发布tomcat jav ...

  7. 阶段3 2.Spring_05.基于XML的IOC的案例1_1 基于XML的IOC的案例-案例准备

    导坐标 创建数据库表 create table account( id int primary key auto_increment, name varchar(40), money float )c ...

  8. Python学习之==>Socket网络编程

    一.计算机网络 多台独立的计算机通过网络通信设备连接起来的网络.实现资源共享和数据传递.在同一台电脑上可以将D盘上的一个文件传到C盘,但如果想从一台电脑传一个文件到另外一台电脑上就要通过计算机网络 二 ...

  9. Spring MVC -- 去掉静态资源的拦截

    <!-- springmvc的前端控制器 --> <servlet> <servlet-name>springMVC</servlet-name> &l ...

  10. 主机加固之win7

    这套主机加固方案很简单,一步一步按着顺序来弄就可以,部分步骤还配有相关图片.可以先用虚拟机来做一次加固,以防弄错后不好恢复.记得弄个快照,以防万一.下次有空写个win7暴力破解~ 1. 配置管理 1. ...