vue教程2-02 vue防止花括号{{}}闪烁,v-text和v-html、v-cloak
2017-04-27 10:14
633 查看
vue教程2-02 vue防止花括号{{}}闪烁,v-text和v-html、v-cloak
一、v-text和v-html
<span>{{msg}}</span> --> v-text
{{{msg}}} --> 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></title> <style> </style> <script src="vue.js"></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:;" class="top">{{item.acc}}</a> <a href="javascript:;" class="down_icon">{{item.ref}}</a> <a href="javascript:;" class="cut">删除</a> </span> </p> </div>
相关文章推荐
- Vue防止花括号闪烁
- vue防止闪烁(当网速慢时,访问页面出现花括号)
- vue-防止花括号闪烁
- vue学习02--处理用户输入(v-on/v-model/v-show/v-text/v-html)
- vue中v-text,v-html, v-model, {{}}之间的异同
- 【VueJS】为防止暴露 {{xxx}} 而诞生的v-text & v-html
- vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)
- Android基础教程——在TextView中显示Html 自定义标签,获取标签属性
- 5.5.vue入门基础学习笔记-基础指令介绍(其他绑定指令v-text v-html v-once v-pre v-cloak)
- vue中v-text,v-html, v-model, {{}}之间的异同
- vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
- 【PHP】富文本HTML过滤器:HTMLPurifier使用教程(防止XSS)
- android教程之textview解析带图片的html示例
- vue数据渲染出现闪烁问题及v-cloak没生效
- vue 防止加载闪烁
- vue学习笔记2——指令v-text && v-html && v-bind
- vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)
- vue 插值 v-once,v-text, v-html详解
- vue教程3-02 vue动画
- Vue中 v-html 与 v-text 的区别