本文共 2829 字，大约阅读时间需要 9 分钟。

Vue的条件判断和循环遍历

个人博客

Vue系列

上一篇：

下一篇：

条件判断

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修改第一个元素，界面才会发生响应式更新。

转载地址：http://abtzi.baihongyu.com/