基本使用

  • 给一个标签添加v-if属性，它的值为一个布尔值，如果该值为true，则该标签和其中的内容就会显示，如果为false，其中的内容就会隐藏
  • v-if/v-else 一般是结合使用的，标签1使用v-if，标签2使用v-else，如果 v-if 的值为true，则标签1显示，标签2隐藏。如果 v-if 的值为false，则标签1隐藏，标签2显示

v-if/v-else-if/v-else结合使用

  • 一个案例：根据分数来判断显示不及格，及格，良好，优秀

    1. <div id="app">
    2.   <h1>当前分数:{{score}}</h1>
    4.   <h2 v-if="score>=90">优秀</h2>
    5.   <h2 v-else-if="score>=80">良好</h2>
    6.   <h2 v-else-if="score>=60">及格</h2>
    7.   <h2 v-else>不及格</h2>
    9. </div>
    11. <script>
    12.   const app = new Vue({
    13.     el: '#app',
    14.     data: {
    15.       score: 89
    16.     }
    17.   })
    18. </script>

  • 不过不推荐将逻辑判断卸载标签中，还是尽量写在计算属性中，但是如果只有两种情况判断，就可以在标签中使用v-if/v-else

用户登录切换案例

  1.   <div id="app">
  2.     <span v-if="isUser">
  3.       <h2>用户账号</h2>
  4.       <input type="text" placeholder="用户账号">
  5.     </span>
  6.     <span v-else>
  7.       <h2>用户邮箱</h2>
  8.       <input type="text" placeholder="用户邮箱">
  9.     </span>
  10.     <button @click="btnClick()">切换类型</button>
  11.   </div>
  13.   <script>
  14.     const app = new Vue({
  15.       el: '#app',
  16.       data: {
  17.         isUser: true
  18.       },
  19.       methods: {
  20.         btnClick () {
  21.           this.isUser = !this.isUser
  22.         }
  23.       }
  24.     })
  25.   </script>
  • 如上案例有个小问题，当用户输入了值之后再进行切换，输入框中的内容不会清空，似乎在上一个input中输入的内容会跑到别的input框中，有点奇怪
  • 问题解答：Vue在渲染DOM到页面上时，不是直接渲染的，而是有一个中间环节，先把我们要显示的东西放在内存中，就是虚拟DOM，然后再把虚拟DOM渲染到页面上，Vue在将虚拟DOM渲染到页面上时，处于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建元素，在上面的案例中，Vue内部发现原来的span中的两个元素和新的要渲染的两个元素相同，它内部会直接修改该虚拟DOM的一些属性，如id、placeholder等，不会重新创建新的虚拟DOM，（这里是没有修改value中的值）如此一来，就会出现如上的现象
  • 解决方案：我现在不希望让input来复用，可以给input来加一个key属性，如果两个input的key值是一样的，Vue就会认为这个input是可以复用的，如果两个input的key值不一样，Vue就不会复用，就会重新生成新的虚拟DOM

v-show和v-if的使用以及区别

  • v-show是切换元素的显示与隐藏，当v-show的值为false，仅仅是将元素的display属性设置为了none而已，适用于元素频繁切换显示和隐藏时
  • v-if是决定元素渲染与否的，当v-if的值为false时，压根不会有对应的元在DOM中，适用于只有一次的切换