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 相关文章推荐
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
浅析javascript函数表达式
Feb 10 Javascript
javascript html5实现表单验证
Mar 01 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 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 生成文字png图片的代码
2011/04/17 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
php实现多站点共用session实现单点登录的方法详解
2019/09/18 PHP
为Extjs加加速(javascript加速)
2010/08/19 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
简单实现js浮动框
2016/12/13 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
Python 用户登录验证的小例子
2013/03/06 Python
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
python 判断网络连通的实现方法
2018/04/22 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
详解django自定义中间件处理
2018/11/21 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
外贸业务员求职信范文
2013/12/12 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android