Vue 内置指令（一）

Vue.js针对一些常用的页面功能提供了以指令来封装的使用方式，以html元素属性的方式使用

v-show

 <div id="app">
        <h1 v-show="yes">yes</h1>
        <h1 v-show="no">NO</h1>
        <h1 v-show="age>=25">age:{{age}}</h1>
        <h1 v-show="name.indexOf('yang')>=0">Name:{{name}}</h1>
    </div>
    <script src="./Vue.js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                yes:true,
                no:false,
                age:28,
                name:"yangyu"
            }
        })
    </script>

效果如下：

我们可以通过变量的控制来操作DOM的显示与否

v-if

v-if指令根据表达式的值的真假来生成或删除一个元素，我们可以将上述代码换成v-if的来看看有什么不同

从效果上来说，没有区别，但是从DOM层来说，v-show无论结果为true或者false，DOM层都会渲染出来，但是如果为false,会将这个元素设置属性为display:none;而v-if为false时，根本就不会渲染这个元素。

v-else-if &&v-else

这两个指令和v-if一起使用，可以实现互斥的条件判断

  <div id="app">
        <span v-if="score >=85">优秀</span>
        <span v-else-if="score >=75">良好</span>
        <span v-else-if="score >=60">及格</span>
        <span v-else>不及格</span>
    </div>
    <script src="./Vue.js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
               score:90
            }
        })
    </script>

用key管理可复用的元素

Vue会尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染，这么做使Vue渲染效率会变得非常高

 <div id="app">
        <template v-if="loginType === 'username'">
            <label>用户名：</label>
            <input placeholder="请输入你的用户名">
        </template>
        <template v-else>
            <label>Emall:</label>
            <input placeholder="请输入你的Email">
        </template>
        <p><button @click="ChangeClick">切换登陆方式</button></p>
    </div>
    <script src="./Vue.js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                loginType:"username"
            },
            methods:{
                ChangeClick(){
                    if(this.loginType === 'username'){
                       this.loginType = 'email'
                    }else{
                        this.loginType = 'username'
                    }
                }
            }
        })
    </script>

我们会发现最开始登陆时，输入内容，当切换登陆方式，内容还存在，这是我们不希望的，所以就会使用key。

 <template v-if="loginType === 'username'">
            <label>用户名：</label>
            <input placeholder="请输入你的用户名" key="username-input">
        </template>
        <template v-else>
            <label>Emall:</label>
            <input placeholder="请输入你的Email" key="email-input">
        </template>
        <p><button @click="ChangeClick">切换登陆方式</button></p>