通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)

    • v-if
    • v-else-if
    • v-else
    • v-show
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4.   <meta charset="UTF-8">
      5.   <title>Title</title>
      6.   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
      7. </head>
      8. <body>
      9. <div id="app">
      10.   <span>{{message}}</span>
      11.   <hr>
      12.   <a href="#" v-if="isLogin">欢迎你归来</a>
      13.   <hr>
      14.   <a href="#" v-if="level === 1">青铜</a>
      15.   <a href="#" v-else-if="level === 2">白银</a>
      16.   <a href="#" v-else>王者</a>
      17.   <hr>
      18.   <span v-if="seen">hello</span>
      19.   <span v-show="seen">world</span>
      20. </div>
      21. </body>
      22. <script>
      23.   var vm = new Vue({
      24.       el: "#app",
      25.       data: {
      26.           message: "hello",
      27.           isLogin: false,
      28.           level: 2,
      29.           seen: true,
      30.       }
      31.   })
      32. </script>
      33. </html>
      image.png
      v-show用法和v-if大致一样，但是它不支持v-else
      在vue中使用v-show, 原来的css代码不能设置display属性, 会导致冲突