架构师

您现在的位置是:首页 > 程序人生 > 前端别闹

前端别闹

vue学习笔记:v-if语法

架构师小跟班 2020-06-03 前端别闹
v-if、v-else-if、v-else这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件简单的案例演示:<div id="a

v-if、v-else-if、v-else

这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

简单的案例演示:

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

v-if的原理:v-if后面的条件为false时,对应的元素以及其子元素不会渲染,也就是根本不会有对应的标签出现在DOM中。

条件渲染案例

我们来做一个简单的小案例:

用户再登录时,可以切换使用账号登录还是邮箱地址登录。

类似如下情景:

<div id="app">
  <span v-if="type === 'username'">
    <label>用户账号:</label>
    <input type="text" placeholder="请输入用户账号">
  </span>
  <span v-else>
    <label>邮箱地址:</label>
    <input type="text" placeholder="请输入邮箱地址">
  </span>
  <button @click="btnClick">切换类型</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "架构师小跟班",
      type: "username"
    },
    methods: {
      btnClick() {
        this.type = this.type === 'username' ? 'email' : 'username'
      }
    }
  })
</script>

案例小问题

小问题:

如果我们在有输入内容的情况下,切换了类型,我们会发现文字依然显示之前的输入的内容。但是按道理讲,我们应该切换到另外一个input元素中了。在另一个input元素中,我们并没有输入内容。

为什么会出现这个问题呢?

这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素。在上面的案例中,Vue内部会发现原来的input元素不再使用,直接作为else中的input来使用了。

解决方案

如果我们不希望Vue出现类似重复利用的问题,可以给对应的input添加key,并且我们需要保证key的不同

<div id="app">
  <span v-if="type === 'username'">
    <label>用户账号:</label>
    <input type="text" placeholder="请输入用户账号" key="username-input">
  </span>
  <span v-else>
    <label>邮箱地址:</label>
    <input type="text" placeholder="请输入邮箱地址" key="email-input">
  </span>
  <button @click="btnClick">切换类型</button>
</div>


文章评论