v-if 的使用

v-if


满足一定条件渲染数据

使用
<div id="app">
    <section v-if="isShow">					<!-- isShow 为 true 时,显示下面的div -->
        <div>我是div,isShow为True时我显示</div>
    </section>
    <section v-else>						<!-- isShow 为 false 时,显示下面的div -->
        <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就是同一个东西,就是一些属性不同,所以里面的值会被保留

解决方案:

<!-- 如果不希望Vue出现类似的复用的情况,可以给对应的input添加key值,key不同代表不能相互复用 -->
<input type="text" placeholder="请输入邮箱" id="email" key="123">
<input type="text" placeholder="请输入邮箱" id="email" key="12">	

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐