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 相关文章推荐
基于jquery的表头固定的若干方法
Jan 27 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
jquery css 设置table的奇偶行背景色示例
Jun 03 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
vue实现扫码功能
Jan 17 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
用在PHP里的JS打印函数
2006/10/09 PHP
PHP VS ASP
2006/10/09 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
php 可变函数使用小结
2018/06/12 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
jquery和css3实现的炫酷时尚的菜单导航
2014/09/01 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
JavaScript Date对象应用实例分享
2017/10/30 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
nodejs对mongodb数据库的增加修删该查实例代码
2020/01/05 NodeJs
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
起诉状范本
2015/05/20 职场文书
python通过新建环境安装tfx的问题
2022/05/20 Python