v-if

绑定HTML Class

    <!--
        语法对象
        class active 的更新取决于数据属性isActive 是否为真值 
        -->
    <div v-bind:class="{active:isActive}"></div>
    <!-- v-bind:class 指令可以与普通的class 属性共存 -->
    <div class="static" v-bind:class="{active:isActive,'text-danger':hasError}"></div>
    <script>
        data:{
            isActive:true,
            hasError:false
        }
    </script>
    <div class="static active"></div>
    <!-- 绑定返回对象的计算属性 -->
    <div v-bind:class="classObject"></div>
    <script>
        data:{
            isActive:true,
            error:null
        },
        computed:{
            classObject:function(){
                return{
                    active: this.isActive && !this.error,
                    'text-danger':this.error && this.error.type ==='fatal'
                }
            }
        }
    </script>

v-if

    <!-- Handlebars 模板 -->
    {{#if ok}}
        <h1>Yes</h1>
    {{/if}}

在Vue.js，使用v-if 指令实现相同的功能，v-else 添加一个else 块
v-else 元素必须跟在v-if 或者v-else-if 元素后面，否则不被识别

    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>

#用key 管理可复用的元素

    <div id="app">
        <template v-if="loginType==='username'">
            <label>Username</label>
            <input placeholder="Enter your username" key="username-input">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address" key="email-input">
        </template>
    <input v-on:click="changeName" type="button" value="toggle">
    </div>
    //
        let change=new Vue({
            el: '#app',
            data:{
                n:1,
                loginType:'username'
            },
            methods:{
                changeName:function(){
                    this.n += 1;
                    if(this.n %2 ===0){
                        this.loginType = 'email'
                    }else{
                        this.loginType='username'
                    }
                }
            }
        })
        //第二种方法
        <input v-on:click="loginType= !loginType" type="button" value="toggle">
        let change=new Vue({
            el: '#app',
            data:{
                loginType:true
            }
        })

v-if 与 v-for 一起使用时，v-for 具有比v-if 更高的优先级