Vue学习（四）：条件渲染 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
</head>
<body>
<!--v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销-->
<!--如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好-->
<div id="example1">
    <h2 v-if="type === 'A'">A</h2>
    <h2 v-else-if="type === 'B'">B</h2>
    <h2 v-else-if="type === 'C'">C</h2>
    <h2 v-else>Not A/B/C</h2>
</div>
<div id="example2" v-show="ok">Hello Vue.</div>
<script type="text/javascript" src="vue.min.js"></script>
<script>
    let vm1 = new Vue({
        el: '#example1',
        data: {
            type: 'B'
        }
    });

    let vm2 = new Vue({
        el: '#example2',
        data: {
            ok: true
        }
    })
</script>
</body>
</html>

 

posted @ 2018-12-11 14:01  寒爵  阅读(255)  评论(0)    收藏  举报