vue教程2-02 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></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教程2-02 vue防止花括号{{}}闪烁，v-text和v-html、v-cloak的更多相关文章

  1. vue教程1-09 交互 vue实现百度下拉列表

    vue教程1-09 交互 vue实现百度下拉列表 <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  3. vue教程2-07 微博评论功能

    vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  4. vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  5. vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用

    vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...

  6. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  7. vue教程3-02 vue动画

    vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...

  8. vue教程3-01 路由、组件、bower包管理器使用

    vue教程3-01 路由.组件.包管理器 以下操作前提是 已经安装好node.js npm bower-> (前端)包管理器 下载: npm install bower -g 验证: bower ...

  9. vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

    vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...

随机推荐

  1. python 安装教程

    1) 安装python2.7,下载地址 https://www.python.org/downloads/   ----2.7 安装完成后,设置环境变量加入path   --d:/ruanjian/p ...

  2. android 发送url带中文出现乱码怎么解决

    上传的时候参数中带中文的时候发送参数的时候就有可能出现乱码,这种情况怎么解决呢,就是设置url的格式为utf-8 httpRequest.setEntity(new UrlEncodedFormEnt ...

  3. 响应式 和 移动 web

    移动web 教程:http://www.imooc.com/learn/494 iphone5 问题一:6401136的图片,能否在iphone5上完全显示? chrome下 iphone5:3205 ...

  4. uva10905同一思路的两种做法，前一种WA，后一种AC

    这道题应该算一道普通的排序吧,实际上就是另一种形式地比大小,自己最开始是用int型存,后来觉着不行,改用long,结果还是WA,这是第一个程序. 第二个程序是改用string处理,确实比int方便很多 ...

  5. [置顶] 获取网络数据中的数组显示成ListView的简单流程

    首先说一下  这是我自己的个人笔记,如果想看看,不用看细节,可以看流程. 定义一个线程池 ExecutorService pool = Executors.newFixedThreadPool(15) ...

  6. Javascript 对象继承 原型链继承 对象冒充 call 混合方式

    一.原型链继承 function ClassA() {} ClassA.prototype.color = "blue"; ClassA.prototype.sayColor = ...

  7. 佛祖保佑，永不死机 - /etc/motd文件配置

    /etc/motd (message of to day:每日信息) 一.执行命令: cat <<EOT >/etc/motd _oo0oo_ (| -_- |) \ = / ___ ...

  8. [php-array] PHP 数组的怪异之处

    // 指定加拿大的 index 为 0 $mobileNation = array( 86 => '中国 + 0086', 44 => '英国 + 0044', 1 => '美国 + ...

  9. Android-Kotlin简单计算器功能

    上一篇博客 Android-Kotlin-配置/入门 配置好了 AndroidStudio Kotlin 的环境: 选择包名,然后右键: 选择Class类型,会有class: 创建CounterCla ...

  10. 缓存中使用的ReentrantReadWriteLock锁

    java中提供了lock锁,简便了设计缓存,下面程序主要是使用读写锁的应用.... import java.util.HashMap; import java.util.Map; import jav ...