• vue教程2-02 vue防止花括号{{}}闪烁,v-text和v-html、v-cloak


    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>
  • 相关阅读:
    3D 图片播放焦点图插件Adaptor
    深入浅出 RPC
    深入浅出 RPC
    Fragment学习(一) :生命周期
    Activity学习(二):Activity的启动模式(转载)
    Activity学习(一):生命周期
    AsyncTask的使用
    Handler用法总结
    深入理解java泛型
    mysql多表连接和子查询
  • 原文地址:https://www.cnblogs.com/baiyangyuanzi/p/6772832.html
Copyright © 2020-2023  润新知