Vue.js学习笔记 第三篇 条件渲染

 

条件选择

条件选择的用法和其他语言类似，一个例子就能解决所有问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app-1">
        <div v-if="number > 90">
            {{ number }}分，牛逼
        </div>
        <div v-else-if="number > 60">
            {{ number }}分，还行吧
        </div>
        <div v-else-if="number > 20">
            {{ number }}分，要努力了
        </div>
        <div v-else>
            {{ number }}分，废了
        </div>
    </div>
    <script type="text/javascript">
        var vm1 = new Vue({
            el: '#app-1',
            data: {
                number: Math.round(Math.random() * 100)  //随机0到100的整数
            }
        })
    </script>
</body>
</html>

随机出一个分数，将值赋给number，通过对number值的判断显示符合条件的内容

v-if与v-show

<div id="app-2">
    <span v-if="isVisible">Hello, TanSea!</span>  
    <span v-show="isVisible">Hello, TanSea!</span>
</div>
<script type="text/javascript">
    var vm2 = new Vue({
        el: '#app-2',
        data: {
            isVisible: false
        }
    })
</script>

v-if与v-show在用法上是一样的，最终展示出来的结果也是一样的，区别在于

v-if：真实的条件渲染，在条件为假时什么也不做，有更高的切换消耗，适应于不怎么切换的场景

v-show：始终被编译并保留，只是简单的用CSS做切换，有更高的初始渲染消耗，适应于频繁切换的场景

posted @ 2017-12-18 16:27  TanSea  阅读(400)  评论(0)  编辑  收藏  举报