v-if

v-if是很常用的使用方式，v-if其实后面就是接的true或者false，或者判断表达式

<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
        <div id="app"  >
            <div v-if="xianshi === 20 "> 显示这个div</div>
            <div v-else-if="xianshi === 10">显示这个div</div>
            <div v-else>显示这个div，这个可能是100</div>
        </div>
        <script>
                var vm = new Vue ({
                    data: {
                        name: "hello world",
                        xianshi: 100,
                    },
                }); 
                vm.$mount("#app")
        </script>

以上三个div之间是不能有中断的

如下判断逻辑就被打断了，只能显示hello world

<div id="app"  >
            <div v-if="xianshi === 20 "> 显示这个div</div>
            <div> hello world</div>
            <div v-else-if="xianshi === 10">显示这个div</div>
            <div v-else>显示这个div，这个可能是100</div>
        </div>