Vue的条件判断和循环遍历

Vue的条件判断和循环遍历

个人博客

https://www.boycharse.top

Vue系列

上一篇：04-v-on的使用
下一篇：06-v-model的使用

条件判断

v-if的使用

v-if的使用非常简单，首先，我们来看一下下面这段代码

  
    
    
    
  
  
    

      
你好啊
    
  
  
  

在h1标签中添加v-if属性，并置它的值为false，这时候的运行结果如下：

浏览器并没有显示h1标签的内容，现在我们更改一下v-if对应的值，改为true

    

      
你好啊
    

运行结果如下：

当v-if为true时，该标签显示，当v-if为false时，该标签不显示。

我们来看下面这个小例子：

  
    
    
    
  
  
    

      
你好啊
      切换
    
  
  
  

这里，我们将v-if的值设置为isShow，然后给button设置一个点击事件，当button被点击时，将isShow的值取反，这样子就可显示点击按钮时，让h1标签的内容一会展示一会隐藏。
结果分析：

此时isShow为false，所以h1标签不显示

点击按钮后，isShow为true，h1标签显示。

再次点击按钮,isShow又变为false，h1标签隐藏

v-else-if和v-else的使用

v-else-if的使用也非常简单，简单来理解，这里无论是v-if，v-else-if,v-else就如同js中的添加判断结构一样。
下面给出v-else-if的例子：

  
    
    
    
  
  
    

      
优秀
      
中等
      
良好
      
及格
      
不及格
    
  
  
  

v-else的使用也很简单，因此，下面直接给出例子：

  
    
    
    
  
  
    

      
true显示
      
false显示
    
  
  
  

v-show的使用

v-show的使用类似于v-if，都是true时显示，false隐藏，如下代码：

  
    
    
    
  
  
    

      
{{message}}
    
  
  
  

div标签不显示

  
    
    
    
  
  
    

      
{{message}}
    
  
  
  

div标签显示

v-if和v-show的区别

v-show和v-if的区别在于v-show只是让元素的display属性变为none，如下所示：

  
    
    
    
  
  
    

      
你好啊
    
  
  
  

v-if为false时，div中并没有该元素！

  
    
    
    
  
  
    

      
你好啊
    
  
  
  

v-show为false时，div标签中有h1标签，但display为none，即隐藏

循环遍历

v-for遍历数组

如果想将一个数组的全部数据渲染在界面上，我们可以用v-for。我们来看下面这个例子：

  
    
    
    
  
  
    

      

        
{{item}}
      
    
  
  
  

这段代码中，data里有一个数组names:

 const app = new Vue({
      el: "#app",
      data: {
        names: ["java", "c++", "js", "vue"],
      },
      methods: {
        btnClick: function (index) {
          console.log(index);
        },
      },
    });

我们想将names中的数据渲染到界面上，这里我们使用v-for标签，可以将数组中的数据渲染到界面上

      

        
{{item}}
      

运行结果如下：

我们可以通过以下代码，来获得数组索引

      

        
{{item}}
      

通过使用(item,index)来获得数组索引。下面我们用下面这段代码来演示：

  
    
    
    
  
  
    

      

        
{{item}}
      
    
  
  
  

这里首先我们用v-for来渲染li标签，然后为每个li标签分别添加点击事件，为点击事件的接收函数传入index。运行结果：

右侧控制台打印的，就是一次从上到下点击列表后打印出来的索引值。

v-for遍历对象

当要遍历的是一个集合时，我们依旧可以用v-for

  
    
    
    
  
  
    

      

        
{{item}}
      
    
  
  
  

运行结果如下：

我们可以使用(item,key)来获得key值，如下：

      

        
{{key}}->{{item}}
      

运行结果

v-for遍历对象数组

如果数组中的元素是对象，依旧可以使用v-for来遍历，用法和遍历数组相同

  
    
    
    
  
  
    

      

        
{{item.name}}
      
    
  
  
  

运行结果如下：

注意事项

1. v-for使用过程最好为元素添加key，且key值与元素是一一对应

  
    
    
    
  
  
    

      

        
{{item}}
      
    
  
  
  

2. 数组的响应方法
   • push
   • pop
   • unshift
   • shift
   • splice
     只有通过以上方法为数组增加或修改元素时，界面才是响应式的
     
     这里我们改变了数组第一个元素的值，但界面并没有发生变化。
     
     我们通过splice修改第一个元素，界面才会发生响应式更新。