vue.js（2）--v-cloak v-text v-html
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的更多相关文章
- Vue.js+vue-element搭建属于自己的后台管理模板：什么是Vue.js?（一）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言 本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...
- Vue.js+vue-element搭建属于自己的后台管理模板：更深入了解Vue.js（三）
前言 上一章我们介绍了关于Vue实例中一些基本用法,但是组件.自定义指令.Render函数这些放到了本章来介绍,原因是它们要比前面讲的要难一些,组件是Vue.js最核心的功能,学习使用组件也是必不可少 ...
- Vue.js（25）之 vue全局配置api介绍
本文介绍的全局api并不在Vue的构造函数内,而是在Vue构造器外面提供这些方法,让我们扩展新功能. 1. vue.extend(options) 参考:https://www.w3cplus.com ...
- 从零开始学 Web 之 Vue.js（四）Vue的Ajax请求和跨域
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 Vue.js（一）Vue.js概述，基本结构，指令，事件修饰符，样式
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue.js（1）--创建vue实例的基本结构
vue实例基本结构与MVVM框架 (1)vue实例基本结构 <!DOCTYPE html> <html lang="en"> <head> &l ...
- 从零开始学 Web 之 Vue.js（六）Vue的组件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue.js（一）
之前看过一点vue.js但是知识点没做记录,现在也差不多不记得了,今天把以前看过的翻一遍,顺便提炼一下知识点 注意:下面的所有与vue相关的标签.指令都是写在id="app"的di ...
- Web - 前端 Vue.js （1）
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...
- vue.js（5）--事件修饰符
vue中的事件修饰符(.stop..prevent..self..capture..once) (1)实例代码 <!DOCTYPE html> <html lang="en ...
随机推荐
- jquery 四舍五入小数处理总结
一.jquery中对小数进行取整.四舍五入的方法 1.丢弃小数部分,保留整数部分 parseInt(5/2) =2 2.四舍五入. Math.round(5/2) =3 3.向下取整 Math.flo ...
- layer实现关闭弹出层刷新父界面功能详解
本文实例讲述了layer实现关闭弹出层刷新父界面功能.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会 ...
- layui学习地址
--layui学习地址 ,相当之好用,非常感谢为我们工作和学习提供方便的才子们,谢谢~https://www.layui.com/demo/layim.html
- 代码实现:两个乒乓球队进行比赛，各出三人。甲队为a,b,c三人，乙队为x,y,z三人。 已抽签决定比赛名单。有人向队员打听比赛的名单。 a说他不和x比，c说他不和x,z比，请编程序找出三队赛手的名单
/*两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人. 已抽签决定比赛名单.有人向队员打听比赛的名单. a说他不和x比,c说他不和x,z比,请编程序找出三队赛手的名单.*/ ...
- gradle 离线模式offline 用法
1. 离线模式 offline所谓离线模式offline,就是gradle在解析依赖的时候采用本地的依赖库(如 GRADLE_USER_HOME指定的路径),而不是依据项目build.gradle文件 ...
- Java-Logger日志
<转载于--https://www.cnblogs.com/yorickLi/p/6158405.html> Java中关于日志系统的API,在 java.util.logging 包中, ...
- python生成密码字典
import itertools as its words = 'abcdefghijklmnopqrstuvwxyz1234567890' r = its.product(words, repeat ...
- Elasticsearch 6.2.3版本 filtered 报错问题 no [query] registered for [filtered]
背景描述 近期在学习<Elasticsearch 权威指南>上的一些基本命令,在操作到 filtered 进行过滤查询的时候,报错 “no [query] registered for [ ...
- tomcat gc和内存
tomcat启动参数,将JVM GC信息写入tomcat_gc.log CATALINA_OPTS='-Xms512m -Xmx4096m -XX:PermSize=64M -XX:MaxNewSiz ...
- Delphi实现类的持久化保存（DFM格式)
var inStream,outStream:TMemoryStream; begin inStream:=TMemoryStream.Create; outStream:=TMemoryStream ...