Vue学习(六)-v-if的使用

v-if 的使用

v-if

---

满足一定条件渲染数据

使用

<div id="app">
    <section v-if="isShow">					
        <div>我是div，isShow为True时我显示div>
    section>
    <section v-else>						
        <div>我是div，isShow为False时我显示div>
    section>
div>

var app = new Vue({
    el: '#app',
    data: {
        counter: 0,
        isShow: true
    },
})

v-else-if

<section>
    <p v-if='score >= 90'>优秀</p>
    <p v-if='score >= 80'>良好</p>
    <p v-if='score >= 60'>及格</p>
    <p v-else>不及格</p>
</section>

var app = new Vue({
    el: '#app',
    data: {
        score: 60
    },
})

// 逻辑比较复杂的使用计算属性，更推荐使用这样的写法
<p> {{result}} </p>

computed: {
    result() {
        if (this.score >= 90) {
            return '优秀'
        } else if (90 > this.score >= 80) {
            return '及格'
        } else {
            return '不及格'
        }
    }
}

案例3：切换账号格式

<div id="app">
    <section>
        <span v-if='isShow'>
            <label for="username">用户账户label>
            <input type="text" placeholder="请输入账号" id="username">
            <button @click='toggle'>切换邮箱button>
        span>
        <span v-else>
            <label for="email">用户邮箱label>
            <input type="text" placeholder="请输入邮箱" id="email">
            <button @click='toggle'>切换账号button>
        span>
    section>
div>

虚拟DOM复用问题

问题：

1. 明明实在邮箱界面切换，结果里面的值被另外一个input框复用了
2. 虽然有时候我们需要这样的功能 ，但是大部分情况下还是去掉的。

原因：

1. 在Vue里面，刚拿到DOM的时候是不会直接渲染到页面的上的，而是先创建一个虚拟DOM，如果要渲染已经有的元素，虚拟DOM会尽量复用这个元素
2. 比如我们写了两个input标签，其实虚拟DOM里面就储存了一个input标签的模板，每当页面上需要一个input标签，就会用把这个模板渲染到页面上，实际上两个input就是同一个东西，就是一些属性不同，所以里面的值会被保留

解决方案：

<input type="text" placeholder="请输入邮箱" id="email" key="123">
<input type="text" placeholder="请输入邮箱" id="email" key="12">