Vue中判断语句与循环语句基础用法及v-if和v-for的注意事项详解

更新时间：2022年08月03日 11:00:52 作者：小余努力搬砖

在Vue指令中,最经常被用于做逻辑操作的指令,下面这篇文章主要给大家介绍了关于Vue中判断语句与循环语句基础用法及v-if和v-for注意事项的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下

一、判断语句

v-if、v-else、v-else-if

v-if是判断是否将DOM元素显示出来

不满足条件的元素，会直接删除，不会存在浏览器上面

v-show

也是用来判断，是否将DOM元素在页面上显示，但是与v-if有着区别，它的不显示是通过display:none;实现的，还是存在浏览上。

   <div id="app">
        <h2 v-if="age<18">未成年</h2>
        <h2 v-else-if="age<60">壮年</h2>
        <h2 v-else>老年</h2>
        <h2 v-show="flag">show</h2>
        <h2 v-if="flag">if</h2>
    </div>
   
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return{
                    age:71,
                    flag:false//true会显示，false不会显示 
                }
            }
        })
    </script>

如下图片显示，不存在时v-if和v-show的显示状态

可以发现show是被display:none;影藏起来了

if已经从这个世界上消失了

案例

这里用简单的if判断，可以通过按钮控制不同的输入模式

这里也会出现一个细节上的问题，因为Vue会出现大量的复用情况，所以这里需要在input表单中设置一个key值，使其出现差别，在以输入内容的表单，切换后内容会也会被取消掉。

   <div id="app">
        <span v-if="usname">
            <label for="uname">用户名</label>
            <input type="text" id="username" placeholder="输入用户名" key="index">
        </span>
        <span v-else="usname">
            <label for="email">用户名邮箱</label>
            <input type="text" id="email" placeholder="输入邮箱" key="index1">
        </span>
        <button @click="usname=!usname">选择</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return{
                    usname:true
                }
            }
        })
    </script>

二、循环语句

如下案例

遍历数组

是通过循环来实现点击变色，这里遍历出了下标和内容，在页面上显示出来

v-for="(item,index) in list"

item值index索引

    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li :class="currentIndex==index?'active':''" @click="change(index)" v-for="(item,index) in list">{{index}}--{{item}}</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    currentIndex:0,
                    list:["海王","海贼王","火影忍者","复仇者联盟"],
                }
            },
            methods:{
                change(index){
                    this.currentIndex=index
                }
            }
        })
    </script>
</body>

遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 1.遍历过程没有使用index索引-->
    <!-- 格式为：(value, name) -->
    <ul>
      <li v-for="(item,key) in user" >{{key+"-"+item}}</li>
    </ul>
    <!-- 格式为：(value, name, index) -->
    <ul>
      <li v-for="(item,key,index) in user" >{{key+"-"+item+"-"+index}}</li>
    </ul>
 
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        user:{
          name:"zzz",
          height:188,
          age:24
        }
      }
    })
  </script>
</body>
</html>

三、v-if和v-for的注意事项

如果将v-if和v-for 在同一个标签内使用，会出现每次先循环，在去判断渲染，在性能上出现了浪费

要注意这个细节，在写代码时，可以将for包含到if判断中，使其不在一个标签内，从而避免了同是使用的情况。

这里，还会出现一个问题，如果使用index为索引，在渲染表单的时候就会出现，表单添加，表单内容没有出现变化，需要自己起一个唯一标志符。

附：根据某一个与待循环列表无关的属性决定是否展示渲染后的数组对象时，可以把 v-if 上移。

例子：根据 isShow 属性决定是否显示 users 列表

users: [
        {'name': '111'},
        {'name': '222'},
        {'name': '333'},
        {'name': '444'}
      ],

isShow: true

改良前：

<ul>
  <li v-for="user in users" v-if="isShow">
    {{ user.name }}
  </li>
</ul>

改良后：

<ul v-if="isShow">
  <li v-for="user in users">
    {{ user.name }}
  </li>
</ul>

总结

到此这篇关于Vue中判断语句与循环语句基础用法及v-if和v-for的注意事项详解的文章就介绍到这了,更多相关Vue判断语句与循环语句用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue路由守卫详解
路由导航守卫提供了一些钩子函数,可以在路由导航过程中进行拦截和控制,其中,beforeEach 导航守卫可以在每次路由切换前被触发,本文给大家介绍Vue路由守卫详解,感兴趣的朋友一起看看吧
2023-10-10
使用mint-ui开发项目的一些心得(分享)
下面小编就为大家带来一篇使用mint-ui开发项目的一些心得(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Vue 引入AMap高德地图的实现代码
这篇文章主要介绍了Vue 引入AMap高德地图的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue Echarts实现可视化世界地图代码实例
这篇文章主要介绍了Vue Echarts实现可视化世界地图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
基于elementUI竖向表格、和并列的案例
这篇文章主要介绍了基于elementUI竖向表格、和并列的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
在 Vue 中使用 dhtmlxGantt 组件时遇到的问题汇总(推荐)
dhtmlxGantt一个功能丰富的甘特图插件，支持任务编辑，资源分配和多种视图模式，这篇文章主要介绍了在 Vue 中使用 dhtmlxGantt 组件时遇到的问题汇总,需要的朋友可以参考下
2023-03-03
Vue使用预渲染代替SSR的方法
这篇文章主要介绍了Vue使用预渲染代替SSR的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
案例实操vue事件修饰符带你快速了解与应用
这篇文章主要介绍了vue常见的事件修饰符,在平时无论是面试还是学习工作中都会经常遇到的,本文就带你快速上手,需要的朋友可以参考下
2023-03-03
Vue页面跳转动画效果的实现方法
百度了好久都没办法实现vue中一个页面跳到另一个页面，甚至到google上搜索也是没办法的，最终还是找了高人亲自指导，所以下面这篇文章主要给大家介绍了关于Vue页面跳转动画效果的实现方法，需要的朋友可以参考下
2018-09-09
少女风vue组件库的制作全过程
这篇文章主要给大家介绍了关于少女风vue组件库的制作全过程，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05