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. Java 学习之集合类（Collections）

    Collection(集合类) 我们是使用数组来保存数据,但是他的长度一旦创建,就已经确定了,当我们要动态传入穿值,数组就有些局限了,集合类就孕育而生:所谓集合,就是来保存,盛装数据,也可称为容器类: ...

  2. 用jquery实现复选框全选全不选问题（完整版），在网络上怎么也找不到完整的解决方案，重要搞全了

    首先准备jsp页面控件: 请选择您的爱好:<br> <input type="checkbox" id="all" name="se ...

  3. x86_64汇编调试程序初步

    寄存器说明: rdi 存第1个参数(值或地址) rsi 存第2个参数 rdx 存第3个参数 rcx 存第4个参数 r8 存第5个参数 r9 存第6个参数 rax 第1个返回值 rdx 第2个返回值 r ...

  4. css3实现卡牌旋转与物体发光效果

    效果演示 http://demo.qpdiy.com/hxw/CSS3/rotate+light.html 物体旋转: 卡牌同一位置放2张图片,通过设置3D动画旋转实现 animation: card ...

  5. ajax请求也可以用form表单向后台提交数据!!!!

    激动的我简直语无伦次,不说了上代码,用ajax实现form表单数据的请求,啦啦啦啦 html: <form> <input name="userName" val ...

  6. POJ3046--Ant Counting(动态规划)

    Bessie was poking around the ant hill one day watching the ants march to and fro while gathering foo ...

  7. python生成器实例

    生成器是一种特殊的迭代器,它有yield语句 #coding:utf-8def fibs(max): n,a,b = 0,0,1 while n < max: yield b a , b = b ...

  8. Java读取修改Properties文件

    properties文件是我们经常需要操作一种文件,它使用一种键值对的形式来保存属性集. 无论在学习上还是工作上经常需要读取,修改,删除properties文件里面的属性. 本文通过操作一个prope ...

  9. ASP.NET Web API 框架研究 Action方法介绍

    在根据请求解析出匹配的Controller类型并创建实例后,要在该Controller类型中的众多Action方法中选择与请求匹配的那一个,并执行,然后返回响应. Action方法,其元数据,主要包括 ...

  10. hdu 1.3.4 shǎ崽 OrOrOrOrz

    简单的排序,注意输出即可 #include <iostream> #include <algorithm> using namespace std; int main() { ...