孫空空的Vue之路-Day04

孫空空~發表於2020-10-23
Vue
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>條件渲染</title>
</head>
<body>
<!--條件渲染-->
<!--    v-if    -->
<!--    v-else  -->
<!--    v-show  -->
<div id="demo">
    <!--v-if和v-else的展示操作-->
    <p v-if="flag">愛你</p>
    <p v-else>不愛你</p>
    <button @click="flag=!flag">改變從此刻發生</button>
    
    <!--v-show的展示-->
    <p v-show="ok">結婚</p>
    <p v-show="!ok">不結婚</p>
    <button @click="ok=!ok">改變從此刻發生</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#demo',
        data:{
            flag:false,
            ok:false
        }
    })
</script>
</body>
</html>

v-if 、v-else 和 v-show的區別
1.v-if 、v-else：在進行條件顯示時，記憶體不會保留否定的條件，如果當前頁面要進行大量的條件顯示不建議使用。
2.v-show：進行條件顯示時，當前頁面會保留否定條件的頁面，如果頁面進行大量的條件顯示推薦使用。
【ps】作為Vue的小白，如果有錯誤資訊，希望大家在評論取留言指正，謝謝大家~

相關文章