vue教程2-02 vue防止花括号{{}}闪烁，v-text和v-html、v-cloak
vue教程2-02 vue防止花括号{{}}闪烁，v-text和v-html、v-cloak
一、v-text和v-html
<span>{{msg}}</span> --> v-text
{{{msg}}} --> v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script src="vue.js"></script>
</head>
<body>
<div id="box">
<span>{{{msg2}}}</span><!-- vue2.0已经去掉{{{}}防止闪烁方法 -->
<span v-text="msg1"></span><!-- 文本的用v-text -->
<span v-html="msg2"></span><!-- 转义html标签 -->
</div>
<script>
new Vue({
el:'#box',
data:{
msg1:'welcome text',
msg2:'<strong>welcome html</strong>'
}
});
</script>
</body>
</html>
二、v-cloak
<style>
[v-cloak]{
/*比较大的段落，防止闪烁，看到花括号*/
display: none;
}
</style> <div class="reply" v-for="item in msgData" v-cloak>
<p class="replyContent">{{item.content}}</p>
<p class="operation">
<span class="replyTime">{{item.time|date}}</span>
<span class="handle">
<a href="javascript:;" class="top">{{item.acc}}</a>
<a href="javascript:;" class="down_icon">{{item.ref}}</a>
<a href="javascript:;" class="cut">删除</a>
</span>
</p>
</div>
vue教程2-02 vue防止花括号{{}}闪烁，v-text和v-html、v-cloak的更多相关文章
- vue教程1-09 交互 vue实现百度下拉列表
vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
- vue教程2-07 微博评论功能
vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用
vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...
- vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- vue教程3-02 vue动画
vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...
- vue教程3-01 路由、组件、bower包管理器使用
vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...
- vue教程2-08 自定义键盘信息、监听数据变化vm.$watch
vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...
随机推荐
- .net 导出Excel
CreateExcel(ExcelDs, ", f); void CreateExcel(DataSet ds, string typeid, string FileName) { Http ...
- java web 怎么下载大文件(上百M)
Java代码 ; ]; , )) != -) { , bytesRead); 13. } 14. toClient.write(buffer ...
- vue+大文件分片上传
最近公司在使用vue做工程项目,实现大文件分片上传. 网上找了一天,发现网上很多代码都存在很多问题,最后终于找到了一个符合要求的项目. 工程如下: 对项目的大文件上传功能做出分析,怎么实现大文件分片上 ...
- Redis源码笔记-初步
目录 目录 1 1. 前言 2 2. 名词 2 3. dict.c 2 3.1. siphash算法 2 3.2. 核心函数 3 3.3. 核心宏 3 3.4. 核心结构体 3 3.4.1. dict ...
- Hadoop-2.8.0分布式安装手册
目录 目录 1 1. 前言 3 2. 特性介绍 3 3. 部署 5 3.1. 机器列表 5 3.2. 主机名 5 3.2.1. 临时修改主机名 6 3.2.2. 永久修改主机名 6 3.3. 免密码登 ...
- linux初学terminal命令(1)ls、cd、su、man、pwd、useradd、passwd、cat、Ctrl+C、Ctrl+Z、Ctrl+L
terminal命令(terminal终端对应windows 按下win(linux下叫Super键)+r,输入cmd(command,命令),召唤出来的Dos控制台) 1. ls(英文list):简 ...
- How to fix "FAILURE DURING CONVERSION TO COFF: FILE INVALID OR CORRUPT"
Error LINK : fatal error LNK1123: failure during conversion to COFF: file invalid or corrupt appear ...
- （广搜）Fire Game -- FZU -- 2150
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82828#problem/I Fire Game Time Limit:1000MS ...
- Hdu1010 Tempter of the Bone（DFS+剪枝） 2016-05-06 09:12 432人阅读 评论(0) 收藏
Tempter of the Bone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Othe ...
- Sensor
原理:http://blog.csdn.net/xiaolei05/article/details/18670161 1.Sensor Type 重力感应/加速度传感器 (G-Sensor ...