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对象所有属性和方法的函数
Oct 16 Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
cookie的secure属性详解
Apr 08 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
Dec 22 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
原生JS实现汇率转换功能代码实例
May 13 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 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
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
PHP编程求最大公约数与最小公倍数的方法示例
2017/05/29 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
javascript 遍历验证所有文本框的值
2009/08/27 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
常用的javascript设计模式
2017/01/11 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
Python实现简单字典树的方法
2016/04/29 Python
浅谈Python的异常处理
2016/06/19 Python
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
python实现折半查找和归并排序算法
2017/04/14 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
公司承诺书格式
2014/05/21 职场文书
求职信格式要求
2014/05/23 职场文书
勿忘国耻9.18演讲稿(经典篇)
2014/09/14 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python