vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例


Posted in Javascript onMarch 13, 2019

本文实例讲述了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>3water.com v-text和v-html</title>
  <style>
  </style>
  <script src="https://cdn.bootcss.com/vue/1.0.4/vue.min.js" async></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>

测试运行效果:

vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例

二、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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="top">{{item.acc}}</a>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="down_icon">{{item.ref}}</a>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="cut">删除</a>
      </span>
    </p>
</div>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
Js 刷新框架页的代码
Apr 13 Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
Js放到HTML文件中的哪个位置有什么区别
Aug 21 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
微信小程序自动客服功能
Nov 02 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
vue实现简单的日历效果
Sep 24 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
vue生命周期与钩子函数简单示例
Mar 13 #Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 #Javascript
vue实现百度下拉列表交互操作示例
Mar 12 #Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 #Javascript
深入理解Node内建模块和对象
Mar 12 #Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 #Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 #Javascript
You might like
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
require(),include(),require_once()和include_once()区别
2008/03/27 PHP
PHP Session机制简介及用法
2014/08/19 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
Bootstrap Table使用方法解析
2016/10/19 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
学习python类方法与对象方法
2016/03/15 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
ubuntu上安装python的实例方法
2019/09/30 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
python搜索算法原理及实例讲解
2020/11/18 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
集团薪酬管理制度
2014/01/13 职场文书
单位介绍信范文
2014/01/18 职场文书
银行职员自我鉴定
2014/04/20 职场文书
车辆工程专业求职信
2014/04/28 职场文书
薪资证明范本
2015/06/19 职场文书
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android
SQL基础的查询语句
2021/11/11 MySQL
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android