Vue之v-once、v-html、v-text、v-pre、v-cloak的基本使用

v-once基本使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
     <h2>{{message}}</h2>
     <h2 v-once>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            }
        })
</script>

</body>
</html>

v-once：不会随着数据的改变而改变，只会在第一次的时候展示数据

在这里插入图片描述

v-html 基本使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <h2>{{url}}</h2>
    <h2 v-html="url">{{url}}</h2>
</div>


<script src="../js/vue.js"></script>
<script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello vue',
                url: '<a href="https://wwww.baidu.com">百度一下</a>'
            }
        })
</script>

</body>
</html>

v-html会把HTML代码转换为对应的内容
在这里插入图片描述

v-text基本使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>{{message}}，兮动人</h2>
    <h2 v-text="message">，兮动人</h2>
</div>

<script src="../js/vue.js"></script>
<script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            }
        })
</script>

</body>
</html>

v-text会把后面HTML内容给覆盖掉

在这里插入图片描述

v-pre的基本使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            }
        })
</script>

</body>
</html>

v-pre会原封不动的显示出所写的内容，不会解析
在这里插入图片描述

v-cloak的基本使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div id="app" v-cloak>
        {{message}}
</div>

<script src="../js/vue.js"></script>
<script>
    //在vue解析之前，div中有一个属性v-clock
    //在vue解析之后，div中没有一个属性v-clock
    setTimeout(function () {
        const app = new Vue({
            el: '#app',
            data: {
                message: 'hello vue'
            }
        })
    },1000)

</script>

</body>
</html>

在这里插入图片描述

posted @ 2020-06-22 15:08  兮动人  阅读(54)  评论(0)  编辑  收藏  举报