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 ...
随机推荐
- 牛客 19-5-3 QAQ
#include<iostream> #include<cstring> using namespace std; typedef long long LL; int main ...
- Centos 6.5 Multipath 初始配置
# This is a basic configuration file with some examples, for device mapper # multipath. # For a comp ...
- 字面常量 kotlin(2)
字面常量数值常量字面值有以下几种:十进制: 123Long 类型用大写 L 标记: 123L十六进制: 0x0F二进制: 0b00001011注意: 不支持八进制Kotlin 同样支持浮点数的常规表示 ...
- UVA 572 -- Oil Deposits（DFS求连通块+种子填充算法）
UVA 572 -- Oil Deposits(DFS求连通块) 图也有DFS和BFS遍历,由于DFS更好写,所以一般用DFS寻找连通块. 下述代码用一个二重循环来找到当前格子的相邻8个格子,也可用常 ...
- kolla-ansible-----cinder存储配置
对接lvm后端存储 1.创建vg 可以使用裸盘或者可以采用Das.iscsi-san.fc-san等方式经存储映射到宿主机本地,然后在进行如下操作 (a)创建LVM 物理卷 /dev/sdb pvcr ...
- Android属性动画完全解析
转载:http://blog.csdn.net/guolin_blog/article/details/43536355 在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系统在一开始 ...
- 安装源配置文件“/etc/apt/sources.list”问题
安装docker过程中使用以下命令设置稳定存储库. $ sudo add-apt-repository \ "deb [arch=amd64] https://download.docker ...
- leetcode 137单词接龙
直接层序遍历,结果有部分测试样例超时: class Solution { public: int ladderLength(string beginWord, string endWord, vect ...
- Fragment 的 replace 和 add 方法的区别?
Fragment 本身并没有 replace 和 add 方法,这里的理解应该为使用 FragmentManager 的 replace 和 add 两种方法切换 Fragment 时有什么不同.我们 ...
- 关于在IDEA中使用maven projects 的Lifecycle中打包package报expected START_TAG or END_TAG not TEXT
报错指定到maven本地仓库下的settings.xml某一行,如下列JDK配置: <profiles> <profile> <id>jdk-1.8</ ...