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. ThinkPHP 二维码生成

    请求获取并展示二维码 <img src="<?php echo U('createCode?zsnumber='.$time.$kcname['id'].$stuInfo['id ...

  2. windows下Oracle数据库完全删除

    1.1   停止所有oracle的服务 1.2   删除安装路径 app及其下所有文件 1.3   删除注册表 regedit 进入 在下列列表中找到与oracle相关的注册表项删除 1.HKEY_L ...

  3. C# 中使用面向切面编程（AOP）中实践代码整洁（转）

    出处:https://www.cnblogs.com/chenug/p/9848852.html 1. 前言 最近在看<架构整洁之道>一书,书中反复提到了面向对象编程的 SOLID 原则( ...

  4. Codeforces Round #548 (Div. 2) D 期望dp + 莫比乌斯反演

    https://codeforces.com/contest/1139/problem/D 题意 每次从1,m中选一个数加入队列,假如队列的gcd==1停止,问队列长度的期望 题解 概率正着推,期望反 ...

  5. s7-200 PID控位

    只有加热模块,没有风扇,所以温度上冲达到5度左右 TITLE=程序注释 Network // 网络标题 // 初始化 LD SM0. LPS MOVW , VW500 MOVW , VW502 MOV ...

  6. php $_SERVER中的一些选项说明

    1, $_SERVER['SCRIPT_FILENAME'] 和 常量 __FILE__的区别(一般情况下两者的显示相同,都是显示文件的绝对路径,包括文件名,显示的起点是 电脑根目录 /) ①,如果在 ...

  7. IntelliJ IDEA 2017版 spring-boot2.0.2 搭建 JPA springboot DataSource JPA环境搭建,JPA实现非字符型设置长度

    1.在github上已有配置环境,如下链接,(需要环境JDK1.8及以上版本,Tomcat1.8及以上版本,搭建maven库,使用编译器IntellJ IDEA) https://github.com ...

  8. CVO实现过程

    module vid_cvo #( , , , , , )( input clk, input rst_p, :] idata, input ivalid, input vid_sop, input ...

  9. 19) maven 项目结构：聚集

    Project Aggregation [,æɡrɪ'ɡeɪʃən] https://maven.apache.org/guides/introduction/introduction-to-the- ...

  10. Path类对路径字符串的操作

    在写程序时,不时会用到处理文件路径的问题,例如:取得扩展名.从路径中取出文件名.路径合并.取出或者去年扩展名等.这些功能都可以通过System.IO.Path类提供的方法来实现.这些相关功能用过多次了 ...