vue_o6_v-once、v-html、v-text、v-pre、v-cloak指令的使用

Abdullahi_kanye發表於2019-12-08
VueHTML

一、v-once指令的使用

1、程式碼部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- v-once指令：展示第一次的資料，之後值就不會改變了 -->
    <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'
            }
        })
    </script>
</body>
</html>

2、效果展示圖

在這裡插入圖片描述

3、程式碼截圖

在這裡插入圖片描述

二、v-html指令的使用

1、程式碼部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <h2>{{url}}</h2>
        <!-- 就會顯示出超連結形式 -->
        <h2 v-html="url"></h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello',
                url:'<a href="httP://www.baidu.com">百度一下</a>'
            }
        })
    </script>
</body>
</html>

2、效果圖

在這裡插入圖片描述

3、程式碼截圖

在這裡插入圖片描述

三、v-text指令的使用

1、程式碼部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</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'
            }
        })
    </script>
</body>
</html>

2、效果圖展示

在這裡插入圖片描述

3、程式碼截圖

在這裡插入圖片描述

四、v-pre指令的使用

1、程式碼部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <h2>{{message}}</h2>
        <!-- v-pre:不解析資料，直接原封不動的顯示出來 -->
        <h2 v-pre>{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                message:'hello'
            }
        })
    </script>
</body>
</html>

2、效果圖展示

在這裡插入圖片描述

3、程式碼截圖

在這裡插入圖片描述

五、v-cloak指令的使用

1、程式碼部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 如果有v-cloak的時候，頁面就看不見東西，空白的。
        就不會像下面會先渲染出{{message}}這麼個東西。然後等待一秒後就會顯示出解析的hello
        原理：就是vue解析之前有v-cloak這麼個屬性指令，那麼符合下面的style樣式，那麼就會不顯示出{{message}}
             在vue解析之後，會自動刪掉v-cloak這個屬性指令，那麼style樣式就沒用了，那麼就會自動正常解析出hello資料
     -->
    <style>
    [v-cloak]{
        display: none;
    }
    </style>
</head>
<body>
    <!-- 在vue解析之前，div中有一個屬性v-cloak ；在vue解析之後，就會相當於把v-cloak刪掉了，就沒有v-cloak這個屬性了 -->
    <div id='app' v-cloak>
        <h2>{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        // setTimeout：延遲執行。頁面會先渲染出{{message}}，等待一秒後才會解析出hello，體驗效果不好，所以要用v-cloak
        setTimeout(function(){
            const app=new Vue({
            el:'#app',
            data:{
                message:'hello'
            }
        })
        },1000)       
    </script>
</body>
</html>

2、效果展示圖

由於有個setTimeOut定時方法：所有使用v-cloak指令和不使用會展示出兩種不同的效果

（1）沒有使用v-cloak指令的時候

在這裡插入圖片描述

（2）使用v-cloak指令的時候

在這裡插入圖片描述

3、程式碼截圖

在這裡插入圖片描述

相關文章