4vue学习_v-once和v-html和v-pre和v-cloak

最新推荐文章于 2024-01-17 10:54:15 发布

chencaw

最新推荐文章于 2024-01-17 10:54:15 发布

阅读量104

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/chencaw/article/details/113240319

版权

VUE 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

1、如果不想要，交互式修改则，备注v-once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>       

    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '数据显示'      
            },
        })
    </script>
</body>

标注后的不响应修改

2、v-html处理html格式的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
        <h2>{{url}}</h2>
        <h2 v-html="url"></h2>       

    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '数据显示',
                url:'<a href="http://www.baidu.com">百度一下</a>'      
            },
        })
    </script>
</body>

显示结果如下

3、v-pre内购原封不动显示你要显示的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
        <h2>{{message}}</h2>
        <h2 v-pre>{{message}}</h2>       

    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '数据显示',  
            },
        })
    </script>
</body>

显示结果如下

4、v-cloak（斗篷）初始化不显示，遮挡下（比如js运行卡住时，不让用户看到变量），更友好些。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id ="app" v-cloak>
        <h2>{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '数据显示',  
            },
        })
    </script>
</body>

看到效果

chencaw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4vue学习_v-once和v-html和v-pre和v-cloak

1、如果不想要，交互式修改则，备注v-once<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <div id ="app"> <h2>{{message}}</h2&g
复制链接

扫一扫

专栏目录