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

最新推荐文章于 2024-09-11 15:33:18 发布

weixin_34104341

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量141

点赞数

文章标签： javascript ViewUI

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>