v-if

条件判断，根据表达式seen和ok的布尔值来决定是否插入P元素

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  6.     <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  7.   </head>
  8.   <body>
  9.     <div id="app">
  10.       <p v-if="seen">现在你看到我了</p>
  11.       <div v-if="ok">
  12.         <h1>菜鸟教程</h1>
  13.         <p>学的不仅是技术，更是梦想！</p>
  14.         <p>哈哈哈，打字辛苦啊！！！</p>
  15.       </div>
  16.     </div>
  18.     <script>
  19.       new Vue({
  20.         el: "#app",
  21.         data: {
  22.             // 为true时所连接的元素显示，为false时不显示
  23.           seen: true,
  24.           ok: true,
  25.         },
  26.       });
  27.     </script>
  28.   </body>
  29. </html>

v-else

如if-else

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  6.     <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  7.   </head>
  8.   <body>
  9.     <div id="app">
  10.       <input type="button" value="变多" @click="rand" />
  11.       <input type="button" value="变少" @click="cut" />
  12.       <div v-if="a > 50">多了</div>
  13.       <div v-else>少了</div>
  14.     </div>
  16.     <script>
  17.       new Vue({
  18.         el: "#app",
  19.         data: {
  20.           a: 50,
  21.         },
  22.         methods: {
  23.           rand: function () {
  24.             this.a = 88;
  25.             console.log("增加");
  26.           },
  27.           cut: function () {
  28.             this.a = 40;
  29.             console.log("减少");
  30.           },
  31.         },
  32.       });
  33.     </script>
  34.   </body>
  35. </html>

if-else-if

可以多次使用

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  6.     <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  7.   </head>
  8.   <body>
  9.     <div id="app">
  10.       <input type="button" value="变多" @click="rand" />
  11.       <input type="button" value="还原" @click="back" />
  12.       <input type="button" value="变少" @click="cut" />
  13.       <div v-if="a > 50">{{ a }} 多了</div>
  14.       <div v-else-if="a == 50">{{ a }} 刚刚好</div>
  15.       <div v-else>{{ a }} 少了</div>
  16.     </div>
  18.     <script>
  19.       new Vue({
  20.         el: "#app",
  21.         data: {
  22.           a: 55,
  23.         },
  24.         methods: {
  25.           rand: function () {
  26.             this.a = 60;
  27.             console.log("增加");
  28.           },
  29.           cut: function () {
  30.             this.a = 40;
  31.             console.log("减少");
  32.           },
  33.           back: function () {
  34.             this.a = 50;
  35.             console.log("还原");
  36.           },
  37.         },
  38.       });
  39.     </script>
  40.   </body>
  41. </html>

v-show

这个也可以用来根据条件展示元素

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
  6. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     <h1 v-show="ok">Hello!</h1>
  11. </div>
  13. <script>
  14. new Vue({
  15.   el: '#app',
  16.   data: {
  17.     //   为true时显示，为false时隐藏
  18.     ok: true
  19.   }
  20. })
  21. </script>
  22. </body>
  23. </html>

v-show 与 v-if

  • v-show的元素始终会被渲染并保存在DOM中
  • v-if只是简单地切换元素的CSS property display。
  • v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
  • 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
  • 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要++非常频繁地切换++，则使用 v-show 较好；如果在运行时条件++很少改变++，则使用 v-if 较好。
  • v-if比v-for有更高的优先级。