6.条件渲染

6.条件渲染

6.1v-if

6.1.1v-if&v-else

示例1
<div id="app1">
            <!-- v-if为true,则显示hello world! -->
            <p v-if="hello">hello world!</p>
            <!-- v-if为false,显示oh,no! -->
            <p v-else>oh,no!</p>
        </div>
        <script>
            var vm1 = new Vue({
                el: '#app1',
                data: {
                    hello: false
                }
            })
        </script>

示例2
<div id="app2">
            <!-- 使用template对多个元素进行渲染,template不会显示在DOM结构中 -->
            <template v-if="ok">
                <h1>Title</h1>
                <p>Paragraph 1</p>
                <p>Paragraph 2</p>
            </template>
            <template v-else>
                <p>you see me</p>
                <p>ha ha ...</p>
            </template>
        </div>
        <script>
            var vm2 = new Vue({
                el: '#app2',
                data: {
                    ok:true
                }
            })
        </script>

6.1.2v-else-if

<div id="app3">
            <p v-if="type === 'A'">A</p>
            <p v-else-if="type === 'B'">B</p>
            <p v-else-if="type === 'C'">C</p>
            <p v-else="type === 'D'">not A,B,C</p>
        </div>
        <script>
            var vm3 = new Vue({
                el:'#app3',
                data:{
                    type:'D'
                }
            })
        </script>

6.1.3用 key 管理可复用的元素

示例1

<!-- 不添加key值,只是切换输入框,切换时输入框已填写的内容不会清空 -->
            <div id="app4">
                <template v-if="conditions === 'ok'">
                    <label for="username">Username</label>
                    <input type="text" placeholder="please enter your username">
                </template>
                <template v-else>
                    <label for="email">Email</label>
                    <input type="text" placeholder="please enter your email">
                </template>
                <button v-on:click="toggleBtn">toggle</button>
            </div>
            <script>
                var vm4 = new Vue({
                    el:'#app4',
                    data:{
                        conditions:'ok'//默认Vue实例中的conditions等于'ok',显示v-if 模板template包含的元素
                    },
                    methods: {
                        toggleBtn:function(){
                            //1)点击按钮时,判断v-if中的Vue实例中的conditions是否等于'ok',等于则赋值'none',使得v-if为false,
                            //显示v-else 模板template包含的元素
                            //2)不等于则赋值'ok',使得v-if为true,显示v-if 模板template包含的元素
                            this.conditions = this.conditions === 'ok'? 'none':'ok';
                        }
                    }
                })
            </script>

示例2

<!-- 添加key值,只是切换输入框同时,清空已经填写的内容 -->
            <div id="app5">
                <template v-if="conditions1 === 'ok'">
                    <label for="username">Username</label>
                    <input type="text" placeholder="please enter your username" key="username-Ipt">
                </template>
                <template v-else>
                    <label for="email">Email</label>
                    <input type="text" placeholder="please enter your email" key="email-Ipt">
                </template>
                <button v-on:click="toggleBtn">toggle</button>
            </div>
            <script>
                var vm4 = new Vue({
                    el:'#app5',
                    data:{
                        conditions1:'ok'
                    },
                    methods: {
                        toggleBtn:function(){
                            this.conditions1 = this.conditions1 === 'ok'? 'none':'ok';
                        }
                    }
                })
            </script>

6.2v-show

<!-- 另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
            不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
            注意，v-show 不支持 <template> 元素，也不支持 v-else。 -->
            <div id="app6">
                <p v-show="show1">app6 is here</p>
                <p v-show="show2">can not see app6</p>
            </div>
            <script>
                var vm6 = new Vue({
                    el:'#app6',
                    data:{
                        show1:true,
                        show2:false
                    }
                })
            </script>

6.3v-if 和 v-show

	v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
   v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
   相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
	一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用
 	v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6.4v-if 和 v-for一起使用

	不推荐同时使用 v-if 和 v-for。请查阅风格指南以获取更多信息。
	当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。请查阅列表渲染指南以获取详细信息。