Vue2 条件与循环学习笔记

Vue2 条件与循环学习笔记

一、条件渲染

在Vue.js中，控制元素的显示与隐藏变得非常简单和直观。Vue提供了v-if、v-else-if和v-else指令来实现条件渲染。

1. v-if

   v-if指令用于根据表达式的真假值来条件性地渲染元素。当表达式的值为true时，元素会被渲染；当值为false时，元素及其绑定的数据绑定、监听器等都会被销毁并移除。

   <div id="app-3">
       <p v-if="seen">现在你看到我了</p>
   </div>
   
   <script>
   var app3 = new Vue({
          
       el: '#app-3',
       data: {
          
           seen: true
       }
   });
   </script>
   

   在上面的例子中，当seen为true时，<p>元素会被渲染；当seen变为false时，<p>元素会被移除。

2. v-else-if 和 v-else

   v-else-if指令必须紧跟在v-if或v-else-if元素之后，而v-else指令则必须放在v-if、v-else-if之后，用于处理所有条件都不满足时的情况。