脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue防止花括号{{}}闪烁v-text和v-html、v-cloak

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

 更新时间：2019年03月13日 09:09:40   作者：白杨-M  
这篇文章主要介绍了vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法,结合实例形式分析了vue.js使用v-text和v-html、v-cloak防止花括号{{}}闪烁的解决方法,需要的朋友可以参考下

本文实例讲述了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="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>

测试运行效果：

二、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实现直播间点赞飘心效果的示例代码

    vue实现直播间点赞飘心效果的示例代码

    这篇文章主要介绍了vue实现直播间点赞飘心效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • Vue实现浏览器打印功能的代码

    Vue实现浏览器打印功能的代码

    这篇文章主要介绍了Vue实现浏览器打印功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • VUE 组件的计算属性详解

    VUE 组件的计算属性详解

    这篇文章主要介绍了VUE组件的计算属性详解，使用计算机属性还是methods取决于你是否需要缓存，当遍历大数组和做大量计算时，应当使用计算机属性，除非你不希望得到缓存，下文来了解具体详情
    2022-06-06
  • 五分钟教你使用vue-cli3创建项目(新手入门)

    五分钟教你使用vue-cli3创建项目(新手入门)

    本文主要介绍了五分钟教你使用vue-cli3创建项目，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue + element 实现多选框组并保存已选id集合的示例代码

    Vue + element 实现多选框组并保存已选id集合的示例代码

    这篇文章主要介绍了Vue + element 实现多选框组并保存已选id集合,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-06-06
  • Vue使用正则校验文本框为正整数

    Vue使用正则校验文本框为正整数

    这篇文章主要介绍了Vue使用正则校验文本框为正整数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • 如何通过Vue实现@人的功能

    如何通过Vue实现@人的功能

    这篇文章主要介绍了如何通过vue实现微博中常见的@人的功能，同时增加鼠标点击事件和一些页面小优化。感兴趣的小伙伴可以跟随小编一起学习一下
    2021-12-12
  • 解决vue 单文件组件中样式加载问题

    解决vue 单文件组件中样式加载问题

    这篇文章主要介绍了解决vue 单文件组件中样式加载问题,文章末尾给大家补充介绍了vue单文件组件中样式的问题，需要的朋友可以参考下
    2019-04-04
  • 详解vuex数据传输的两种方式及this.$store undefined的解决办法

    详解vuex数据传输的两种方式及this.$store undefined的解决办法

    这篇文章主要介绍了vuex数据传输的两种方式 及 this.$store undefined的解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vuex-persist 使用场景分析

    vuex-persist 使用场景分析

    Vuex-Persist 是一个用于在 Vuex 中实现持久化状态的库,它可以用来解决应用程序在刷新浏览器或关闭页面后丢失 Vuex store 中状态的问题,本文给大家介绍vuex-persist 可以用来干什么,感兴趣的朋友一起看看吧
    2023-11-11

最新评论