Vue.js的学习(3)

条件渲染

v-if 所以必须将它添加到一个元素上

<div id="app">
    <p v-if="seen">yes</p>
</div>
//JS
var app=new Vue({
    el:"#app",
    data:{
        seen:true
    }
})

在控制台输入app.seen=false;就可以将元素隐藏

既然有v-if就必须有v-else，当v-if的值为false时，v-else绑定的元素就会比呈现出来

<div id="app">
    <p v-if="seen">yes</p>
    <p v-else>no</p>
</div>
//JS
var app=new Vue({
    el:"#app",
    data:{
        seen:false
    }
})

要是有v-else，就必然有v-else-if

<div id="app">
    <p v-if="seen==='A'">A</p>
    <p v-else-if="seen==='B'">B</p>
    <p v-else-if="seen==='C'">C</p>
    <p v-else>Nothing</p>
</div>
//JS
var app=new Vue({
    el:"#app",
    data:{
        seen:"A"
        //就能看见A
    }
})

用Key管理复用功能

key值的作用就是给元素加上一个唯一值

    </div>
    <div id="app1">
        <template v-if="type==='Email'">
            <label>Email</label>
            <input type="text" placeholder="Enter your Email" key="Email-input">
        </template>
        <template v-if="type==='User'">
            <label>User</label>
            <input type="text" placeholder="Enter your User" key="User-input">
        </template>
        <button @click="{{change()}}">toggle</button>
    </div>
 //JS代码部分
   var app1=new Vue({
        el:"#app1",
        data:{
            type:"Email"
        },
        methods:{
            change:function(){
                if(this.type==="Email"){
                    this.type="User";
                }else{
                    this.type="Email";
                }
            }
        }
    });

在我们没有添加key值的时候，input的placeholder属性并不会被替换掉，这是因为我们的两个模板使用了相同的元素，这个input被复用了

v-show与v-if的区别

• v-if 是惰性的，只有值为真值的时候才会渲染目标，而v-show只是更改了元素的display特性
• v-if 是按照条件来渲染的，他会在切换过程中销毁监听器和子组件等等相关的东西
• v-if切换的开销大于v-show ，v-show会一直存在DOM树中，而v-if 就不一定了