VueJS笔记 v-if v-else v-show (2020.6.3)

如有问题,欢迎各位大佬批评指正
说白了就是跟 if else 差不多,使用到的v-modle:是数据绑定


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>
  <div id="app">
      <div v-if="isLogin">
        {{message1}}
      div>
    <div v-else>
      {{message2}}
    div>
    账号:<input type="text" v-model="admin">
    密码:<input type="text" v-model="password">
    <button @click="login">登录button>
    div>
    <script src="../js/vue.js">script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          admin: '',
          password: '',
          isLogin: false,
          message1: '登录成功',
          message2: '登录失败'
        },
        methods: {
          login() {
            if (this.admin === 'admin' && this.password === '123456') {
              this.isLogin = true;
              console.log("登录成功")
            } else {
              this.isLogin = false;
              console.log("登录失败")
            }
          }
        }
      })
    script>
body>
html>

v-if和v-else小案例


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
head>
<body>
  <div id="app">
      <span v-if="isShow">
        用户名:<input type="text" placeholder="请输入用户名">
      span>
      <span v-else>
        邮箱: <input type="text" placeholder="请输入邮箱">
      span>
    <button @click="toggle">切换button>
    div>
    <script src="../js/vue.js">script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          isShow: true
        },
        methods: {
          toggle() {
            this.isShow = !this.isShow;
          }
        }
      })
    script>
body>
html>

案例小问题:

  • 如果我们在有输入内容的情况下,切换了类型,但是输入框文字还是以前输入的内容
  • 但是按道理讲,我们已经切换到另一个input元素汇中了,但是切换前的数据还都在

问题解答:

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

解决方法:

  • 如果我们不希望Vue出现类似重复利用问题。可以给对应的input添加key
  • 并且我们需要保证key唯一标识,如果key一样就可以复用,相反如果key值不同,就表示不能复用

v-show

  • v-show的用法跟v-if很类似,也用于决定一个元素是否渲染
  • v-if和v-show对比
    • v-if当条件为false的时候,压根就不会有对应的DOM中。
    • v-show当条件为false时,仅仅将元素display属性设置成none而已
  • 如何选择
    • 当需要在显示与隐藏之间切换频繁的话,使用v-show
    • 当只需要切换一次的回收,使用v-if

你可能感兴趣的:(VueJs)