Vue的条件判断和循环遍历

最新推荐文章于 2024-06-05 14:26:44 发布
最新推荐文章于 2024-06-05 14:26:44 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44756582/article/details/106591908
版权

Vue的条件判断和循环遍历

个人博客

https://www.boycharse.top

Vue系列

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

条件判断

v-if的使用

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1 v-if="false">你好啊</h1>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const vue = new Vue({
      el: "#app",
      data: {},
    });
  </script>
</html>

在h1标签中添加v-if属性，并置它的值为false，这时候的运行结果如下：
在这里插入图片描述
浏览器并没有显示h1标签的内容，现在我们更改一下v-if对应的值，改为true

    <div id="app">
      <h1 v-if="true">你好啊</h1>
    </div>

运行结果如下：
在这里插入图片描述
当v-if为true时，该标签显示，当v-if为false时，该标签不显示。

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1 v-if="isShow">你好啊</h1>
      <button @click="btnClick">切换</button>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const vue = new Vue({
      el: "#app",
      data: {
        isShow: false,
      },
      methods: {
        btnClick() {
          console.log(this.isShow);
          this.isShow = !this.isShow;
        },
      },
    });
  </script>
</html>

这里，我们将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的例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1 v-if="score>=90">优秀</h1>
      <h1 v-else-if="score>=80">中等</h1>
      <h1 v-else-if="score>=70">良好</h1>
      <h1 v-else-if="score>=60">及格</h1>
      <h1 v-else>不及格</h1>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const vue = new Vue({
      el: "#app",
      data: {
        score: 90,
      },
    });
  </script>
</html>

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1 v-if="false">true显示</h1>
      <h1 v-else>false显示</h1>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const vue = new Vue({
      el: "#app",
    });
  </script>
</html>

v-show的使用

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div v-show="false">{{message}}</div>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好！",
      },
    });
  </script>
</html>

div标签不显示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div v-show="true">{{message}}</div>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好！",
      },
    });
  </script>
</html>

div标签显示

v-if和v-show的区别

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1 v-if="false">你好啊</h1>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const vue = new Vue({
      el: "#app",
      data: {
        isShow: false,
      },
    });
  </script>
</html>

在这里插入图片描述
v-if为false时，div中并没有该元素！

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1 v-show="false">你好啊</h1>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const vue = new Vue({
      el: "#app",
      data: {
        isShow: false,
      },
    });
  </script>
</html>

在这里插入图片描述
v-show为false时，div标签中有h1标签，但display为none，即隐藏

循环遍历

v-for遍历数组

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in names">{{item}}</li>
      </ul>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        names: ["java", "c++", "js", "vue"],
      },
      methods: {
        btnClick: function (index) {
          console.log(index);
        },
      },
    });
  </script>
</html>

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

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

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

      <ul>
        <li v-for="item in names">{{item}}</li>
      </ul>

运行结果如下：
在这里插入图片描述
我们可以通过以下代码，来获得数组索引

      <ul>
        <li v-for="(item,index) in names">{{item}}</li>
      </ul>

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="(item,index) in names" @click="btnClick(index)">{{item}}</li>
      </ul>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        names: ["java", "c++", "js", "vue"],
      },
      methods: {
        btnClick: function (index) {
          console.log(index);
        },
      },
    });
  </script>
</html>

这里首先我们用v-for来渲染li标签，然后为每个li标签分别添加点击事件，为点击事件的接收函数传入index。运行结果：
在这里插入图片描述
右侧控制台打印的，就是一次从上到下点击列表后打印出来的索引值。

v-for遍历对象

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in info">{{item}}</li>
      </ul>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        info: {
          name: "wangyuyong",
          age: 18,
          sex: "男",
        },
      },
    });
  </script>
</html>

运行结果如下：
在这里插入图片描述
我们可以使用(item,key)来获得key值，如下：

      <ul>
        <li v-for="(item,key) in info">{{key}}->{{item}}</li>
      </ul>

运行结果
在这里插入图片描述

v-for遍历对象数组

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in infos">{{item.name}}</li>
      </ul>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        infos: [
          {
            name: "wangyuyong",
            age: 18,
          },
          {
            name: "wyy",
            age: 18,
          },
          {
            name: "cgl",
            age: 18,
          },
          {
            name: "xzr",
            age: 18,
          },
        ],
      },
    });
    const infos = [
      {
        name: "wangyuyong",
        age: 18,
      },
      {
        name: "wyy",
        age: 18,
      },
      {
        name: "cgl",
        age: 18,
      },
      {
        name: "xzr",
        age: 18,
      },
    ];
    for (let info in infos) {
      console.log(info);
    }
  </script>
</html>

运行结果如下：
在这里插入图片描述

注意事项

  1. v-for使用过程最好为元素添加key，且key值与元素是一一对应
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li class="li" v-for="item in language" :key="item">{{item}}</li>
      </ul>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        language: ["c", "c++", "python", "java"],
      },
    });
  </script>
</html>
  1. 数组的响应方法
    • push
    • pop
    • unshift
    • shift
    • splice
      只有通过以上方法为数组增加或修改元素时，界面才是响应式的
      在这里插入图片描述
      这里我们改变了数组第一个元素的值，但界面并没有发生变化。
      在这里插入图片描述
      我们通过splice修改第一个元素，界面才会发生响应式更新。
U_yong
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue——条件判断、循环遍历
鹿蹊zz的博客
08-02 1996
​ v-if 在首次渲染的时候，如果条件为假，什么也不操作，页面当作没有这些元素。当条件从真变为假的时候，开始局部编译，卸载这些元素，也就是删除。（3）v-if、v-else、v-else-if联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。（2）在上面demo中，Vue内部发现原来的input元素不再使用，所以直接将其映射对应虚拟DOM，用来复用。（1）vue在进行DOM渲染是，处于性能考虑，会复用已经存在的元素，而不是每次都创建新的DOM元素。一般需要使用索引值。..
Vue条件判断及循环遍历（v-if、v-elseif、v-else、v-show、v-for）
qq_65715980的博客
08-02 3307
Vue条件判断及循环遍历（v-if、v-elseif、v-else、v-show、v-for）
【vue学习】—条件判断、循环遍历
scj1014的博客
01-08 1489
1. 条件判断 1.1 v-if/v-else-if/v-else 上面这三个指令与js中的条件语句if、else 、else if 用法类似 Vue的条件指令可以根据表达式的值在DOM中渲染或者销毁元素或者组件 简单的案例演示： <div id="app"> <h2 v-if="score>=90">优秀</h2> <h2 v-e...
vue中数组常用的六种循环方法、VUE中list的各种方法和运用
最新发布
zlfjavahome的专栏
06-05 1235
简单记录一下，常用的六种数组循环的方法，分别是for()，map()，forEach()，filter ()，every()，some();
Vue-条件判断与循环遍历
七一
08-22 768
条件判断 v-if的使用 <div id="app"> <h1 v-if="scope>20">{{message}}</h1> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello', scope: 90
Vue笔记五——条件判断与循环遍历
weixin_46351593的博客
01-02 1121
文章目录条件判断条件渲染案例案例小问题v-show与v-if的区别循环遍历v-for遍历数组v-for遍历对象组件的key属性回顾 条件判断 v-if、v-else-if、v-else 这三个指令与JavaScript的条件语句if、else、else if类似。 Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。 简单的案例演示： <!DOCTYPE html> <html lang="en"> <head> <meta charse
Vue学习第五章-条件判断与循环遍历
01-08
条件判断与循环遍历 1.条件判断 vue的条件判断跟其他语言的if else 大同小异。 语法：v-if='\u6761\u4ef6' v-else v-else-if='\u6761\u4ef6' 无语法糖。 与v-if类似的还有 v-show='\u6761\u4ef6',两者的区别v-if的...
Vue循环遍历选项赋值到对应控件的实现方法
10-15
在Vue.js框架中，我们经常需要处理数据的循环遍历，并将这些数据绑定到相应的UI控件上。本文将详细讲解如何在Vue中实现这一功能，以编辑试题选项为例进行说明。 首先，我们要理解Vue中的数据绑定机制。Vue采用声明...
Vue条件循环判断+计算属性+绑定样式v-bind的实例
10-18
在Vue.js中，条件循环判断、计算属性...通过条件判断控制元素的显示，循环遍历数据创建列表，以及用计算属性处理复杂逻辑，我们可以构建出高度定制化的用户界面。同时，`v-bind`让样式绑定变得灵活，增强了用户体验。
解决vue v-for 遍历循环时key值报错的问题
10-18
当数据发生变化时，Vue会根据`key`值判断元素是否需要重新创建或移动，而不是简单地对比整个虚拟DOM树。 2. **列表重排**：如果你的列表需要进行排序，`key`可以帮助Vue更准确地识别每个元素的对应关系，避免不必要...
vue遍历对象中的数组取值示例
10-16
这里有一个条件判断 `v-if='Object.prototype.toString.call(value).slice(8,-1) == "Array"'` 来确保我们只处理数组类型的值。 如果`value`是一个数组，它将被拆分为两部分显示：`value[0]`作为前缀，`value[1]`...
Vue-04-事件监听、条件判断、循环遍历、响应式的数组方法、过滤器
wsssq_的博客
04-23 1540
事件监听（修饰符）、条件判断、循环遍历、响应式的数组方法、过滤器
【人生苦短我学Vue】-【DAY03】-条件判断，循环遍历
放开这颗白菜让我来
07-14 209
大家好，我是被白菜拱的猪。 一个热爱学习废寝忘食头悬梁锥刺股，痴迷于girl的潇洒从容淡然coding handsome boy! 这里写目录标题一、条件判断1-v-if的使用2-v-if和v-else的结合使用3-v-if和v-else-if和v-else的使用4-用户切换登录小案例以及出现的问题5-v-show的使用二、循环遍历、1-v-for循环遍历数组2-v-for循环遍历对象3-数组响应式方法三、作业的回顾与完成 一、条件判断 vue会根据v-if的值决定元素是否渲染。 1-v-if的使用 在编写
vue-数据遍历-IF判断
奇葩也是花
05-12 4125
1、在js代码中的data节点中，定义一个数据 <script> export default { name: 'HelloWorld', show_div: true, data () { return { title: 'test title' list: [ { id: 1, name: 'likang' }, { id: 2, nam
vue中v-for遍历数组循环生成的控件使用v-if动态判断另一个数组中的值
热门推荐
youyudexiaowangzi的专栏
06-30 2万+
<el-dialog title="title" :visible.sync="dialogVisible" width="600" > <div v-for="(item, index) in studyConditions" style="margin-top:20px;"> <...
【前端框架】vue~条件判断与遍历
不务正业的野猴子
04-10 760
条件判断与遍历是我们程序编程过程中经常遇到的。如页面中需要根据对应权限显示不同操作按钮时我们可以使用条件判断，而当需要根据某一规律显示多个元素时我们可以使用遍历来实现。 本文以【前端框架】vue~hello world中的项目进行演示 条件判断 实现效果：登录成功后需要显示退出按钮，未登录时需要显示登录按钮 图(1) 图(1)中我们使用v-if指令进行逻辑判断，当!loginResult为真时显...
vue如何在遍历时根据索引判断样式
qinkaiyuan94的博客
04-06 4230
&lt;img v-for="(img,index) in item.imgs" :style="{marginLeft:index==0?'0':'5px'}" :src="'img/'+img.imgSrc" :alt="index"/&gt;
vue基础回顾 -- 循环遍历与条件判断
qq_42872677的博客
06-04 1326
vue基础回顾 -- 循环遍历与条件判断标签中循环数组和对象JS中循环数组和对象 标签中循环数组和对象 标签中: 循环对象 格式: " ( 属性值 , 属性名 , 索引值 ) in 对象 循环数组 格式: " ( 元素值 , 索引值 ) in 数组 " <div id="app"> <!-- 循环对象,默认循环属性值 格式: " ( 属性值 , 属性名 , 索引值 ) in 对象 " --> <span v-for=" item in
vue2中 js循环遍历
06-09
在 Vue2 中，你可以使用 `v-for` 指令来循环遍历数组、对象和字符串。具体的语法如下： 1. 遍历数组： ```html <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> ``` 其中，`items` 是要遍历的数组，`item` 表示数组中的每一个元素，`index` 表示元素的索引。在 `v-for` 指令中，使用小括号包裹需要遍历的内容，使用冒号绑定 `key` 属性，避免出现重复的元素。 2. 遍历对象： ```html <ul> <li v-for="(value, key) in obj" :key="key">{{ key }}: {{ value }}</li> </ul> ``` 其中，`obj` 是要遍历的对象，`value` 表示对象中的每一个属性值，`key` 表示属性名。在 `v-for` 指令中，使用小括号包裹需要遍历的内容，使用冒号绑定 `key` 属性，避免出现重复的元素。 3. 遍历字符串： ```html <ul> <li v-for="(char, index) in 'hello'" :key="index">{{ char }}</li> </ul> ``` 在上述示例中，我们使用 `v-for="(char, index) in 'hello'"` 循环遍历字符串 `'hello'` 中的每一个字符，并将它们渲染为一个个的 `li` 元素。 在循环遍历时，我们可以使用 `v-if` 指令对每一个元素进行条件判断，也可以使用 `v-bind` 指令绑定属性值。例如： ```html <ul> <li v-for="(item, index) in items" :key="index" v-if="item.checked">{{ item.name }}</li> </ul> ``` 在上述示例中，我们在循环遍历中使用了 `v-if="item.checked"` 对每一个元素进行了条件判断，只有满足 `item.checked` 为真时才会渲染该元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值