Vue之渲染数据

最新推荐文章于 2024-07-04 10:01:18 发布

姜泥断了姒

最新推荐文章于 2024-07-04 10:01:18 发布

阅读量871

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_46772005/article/details/124683552

版权

本文介绍了Vue中遇到的插值闪烁问题及其解决方法，包括使用v-text和v-html指令。v-text用于纯文本渲染，避免闪烁，而v-html不仅能渲染文本，还能处理HTML标签，有效解决网络延迟导致的闪烁现象。

摘要由CSDN通过智能技术生成

一、插值表达式

<!--    创建容器-->
<div id="container">
<!--    插值表达式 {{属性}}-->
    <h1>{{name}}</h1>
</div>

注意：插值表达式，在渲染数据的时候，会出现插值闪烁

什么是插值闪烁？

当数据不是定死的，而是通过某种方式获取到的，那么当网络延迟的时候，页面会显示插值表达式的语法，等网络加载完毕时，数据才会渲染到页面上

<script>
    //当使用Vue的插值表达式渲染的时候，会出现插值闪烁
    /**
     * 什么的插值闪烁
     * 当数据不是定死的，而是通过某种方式获取到的，
     * 那么当网络延迟的时候，页面会显示插值表达式的语法，
     * 等网络加载完毕时，数据才会渲染到页面上
     * 
     * 这里我用延迟函数，来模拟网络延迟
     */
    setInterval(() =>{
        // 1、创建Vue对象
        new Vue({
            //el 为创建容器的类名
            el:"#container",
            data:{
                name:"今天学习了Vue渲染数据",
                a:'<a href="http://huya.com">虎牙</a>'
            }
        });
    },2000)

</script>

二、v-text

v-text：是一个指令，可以把数据渲染到页面上，但是只能渲染纯文本的数据，可以解决插值闪烁的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门程序</title>
</head>
<body>
<!--引入vue.js-->
<script src="../../public/js/vue.min.js"></script>

<!--    创建容器-->
<div id="container">
<!--    v-text-->
    <h2 v-text="name"></h2>
</div>
</body>
</html>
<script>
    /**
     * 正是因为有插值闪烁，所以在渲染数据的时候，我们都会使用v-text和v-html
     * v-text是只能渲染纯文本，不能渲染标签
     */
    setInterval(() =>{
        // 1、创建Vue对象
        new Vue({
            //el 为创建容器的类名
            el:"#container",
            data:{
                name:"今天学习了Vue渲染数据",
                a:'<a href="http://huya.com">虎牙</a>'
            }
        });
    },2000)

</script>

三、v-html

v-html：是一个指令，可以把数据渲染到页面上，不仅可以渲染纯文本的数据，还可以渲染标签，可以解决插值闪烁的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门程序</title>
</head>
<body>
<!--引入vue.js-->
<script src="../../public/js/vue.min.js"></script>

<!--    创建容器-->
<div id="container">
<!--    v-html-->
    <h2 v-html="a"></h2>
</div>
</body>
</html>
<script>
    /**
     * 正是因为有插值闪烁，所以在渲染数据的时候，我们都会使用v-text和v-html
     * v-text是只能渲染纯文本，不能渲染标签
     * v-html可以渲染文本，也可以渲染标签
     */
    setInterval(() =>{
        // 1、创建Vue对象
        new Vue({
            //el 为创建容器的类名
            el:"#container",
            data:{
                name:"今天学习了Vue渲染数据",
                a:'<a href="http://huya.com">虎牙</a>'
            }
        });
    },2000)

</script>

姜泥断了姒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之渲染数据

一、插值表达式<div id="container"> <h1>{{name}}</h1></div>注意：插值表达式，在渲染数据的时候，会出现插值闪烁什么是插值闪烁？当数据不是定死的，而是通过某种方式获取到的，那么当网络延迟的时候，页面会显示插值表达式的语法，等网络加载完毕时，数据才会渲染到页面上<script&gt
复制链接

扫一扫