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

 更新时间:2019-04-17 21:43:32   作者:佚名   我要评论(0)

本文实例讲述了vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法。分享给大家供大家参考,具体如下:
一、v-text和v-html

<span>{{msg}}</span> -->

本文实例讲述了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>www.jb51.net v-text和v-html</title>
  <style>
  </style>
  <script src="http://files.jb51.net/file_images/article/201903/201931390812235.png?20192139830" alt="" />

二、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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

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

您可能感兴趣的文章:

  • vue使用v-if v-show页面闪烁,div闪现的解决方法
  • vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
  • vue渲染时闪烁{{}}的问题及解决方法
  • 详解vue数据渲染出现闪烁问题
  • vuejs在解析时出现闪烁的原因及防止闪烁的方法
  • vue 插值 v-once,v-text, v-html详解
  • vue学习笔记之指令v-text && v-html && v-bind详解
  • 用v-html解决Vue.js渲染中html标签不被解析的问题
  • vue.js使用v-pre与v-html输出HTML操作示例
  • 详解三种方式解决vue中v-html元素中标签样式
  • Vue中的v-cloak使用解读

相关文章

最新评论