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. dj 模板层template

    1 模板语法之变量 在 Django 模板中遍历复杂数据结构的关键是句点字符, 语法: {{var_name}} def index(request): import datetime s=" ...

  2. s5-1 CPU调度

    基本概念 通过多道程序设计得到 CPU 的最高利用率 (CPU-- I/O 脉冲周期 - - 进程的执行包括进程在 CPU 上执行和等待 I/O ) 进程的执行以 CPU 脉冲开始,其后跟着 I/O ...

  3. Keras预测股票

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- """ Created on Sat Nov 18 21:22:29 201 ...

  4. 【王者荣耀之IT大神版】铭文说明

    铭文共分五级: 一级:仅有老师提供的笔记 二级:添加了自己的听课笔记 三级:添加问题+解决方案(常遇到的问题以及自己实践上遇到的问题,排位赛遇到的遗忘点) 四级:熟记铭文与并添加联想学过的知识 五级: ...

  5. 轻松建立Silverlight开发环境

    创建Silverlight 4开发环境,微软提供最简单的方法是使用Web Platform Installer,进行“一键安装”, 下载安装后,Web Platform Installer会自动检测哪 ...

  6. share pool 管理机制

    Library cache是Shared pool的一部分,它几乎是Oracle内存结构中最复杂的一部分,主要存放shared curosr(SQL)和PLSQL对象(function,procedu ...

  7. [FMX]获取控件样式中的指定项目以便进行调节

    [FMX]获取控件样式中的指定项目以便进行调节 2017-03-26 • C++ Builder.Delphi.教程 • 暂无评论 • swish •浏览 650 次 FMX 的样式丰富了我们的设计, ...

  8. 分形之谢尔宾斯基(Sierpinski)地毯

    前面讲了谢尔宾斯基三角形,和这一节的将把三角形变为正方形,即谢尔宾斯基地毯,它是由瓦茨瓦夫·谢尔宾斯基于1916年提出的一种分形,是自相似集的一种. 谢尔宾斯基地毯的构造与谢尔宾斯基三角形相似,区别仅 ...

  9. Git的一些资源链接

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  10. 用光的微粒说和广义相对论来解释衍射现象 Explanation of Diffraction Phenomenon by Particle Theory of Light and General Relativity

    历史上,物理学是用波动说来解释光的衍射现象.但用微粒说结合广义相对论同样可以做到. 把光看作粒子,当经过障碍物边缘时,由于广义相对论效应,边缘附近的空间被弯曲,使得不同路径的平行光发生偏转,落在障碍物 ...