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程序设计有所帮助。

您可能感兴趣的文章:

Element Alert警告的具体使用方法
这篇文章主要介绍了Element Alert警告的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
这篇文章主要介绍了详解vue-cli 快速搭建单页应用之遇到的问题及解决办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
vue-meta实现router动态设置meta标签的方法
这篇文章主要介绍了vue-meta实现router动态设置meta标签,实现思路非常简单内容包括mata标签的特点和mata标签共有两个属性，分别是http-equiv属性和name属性，本文通过实例代码给大家详细讲解需要的朋友可以参考下
2022-11-11
Vue 使用 setup 语法糖的示例详解
在 setup 语法糖中通过 import 引入的内容，也可以直接在 template 标签中使用，这篇文章主要介绍了Vue 使用 setup 语法糖,需要的朋友可以参考下
2023-10-10
vue3中使用百度地图的简单步骤
最近项目要用到百度地图api,好久没用到地图,就百度了一番,下面这篇文章主要给大家介绍了关于vue3中使用百度地图的简单步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
vue-cli3项目打包后自动化部署到服务器的方法
这篇文章主要介绍了vue-cli3项目打包后自动化部署到服务器的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-09-09
ElementUI下拉框选择后不显示值问题及解决
这篇文章主要介绍了ElementUI下拉框选择后不显示值问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
解决echarts echarts数据动态更新和dataZoom被重置问题
这篇文章主要介绍了解决echarts echarts数据动态更新和dataZoom被重置问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Nuxt不同环境如何区分的方法
在一般情况下，我们的项目肯定需要区分不同环境，那么Nuxt提供给我们这样的基本能力了么，下面我们就一起来了解一下
2021-05-05
el-form错误提示信息手动添加和取消的示例代码
这篇文章主要介绍了el-form错误提示信息手动添加和取消,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08