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

2024-10-01 01:07:13

一、判断语句

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中的v-if和v-for不建议一起用

本文主要介绍了为什么v-if和v-for不建议一起用?分享给大家,具体如下: 一.作用 v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 true值的时候被渲染 v-for 指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组或者对象,而 item 则是被迭代的数组元素的别名在 v-for 的时候,建议设置key值,并且保证每个key值是独一无二的,这便于diff算法进行优化两者在用法上 <
vue.js 嵌套循环、if判断、动态删除的实例

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API app.html <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> vuejs 嵌套循环.if判断 </title> <
Vue.js常用指令汇总（v-if、v-for等）

有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素: eg: HTML: <div id="example01"> <p v-if="male">Male</p> <p v-if=&qu
vue2和vue3的v-if与v-for优先级对比学习

Vue.js 中使用最多的两个指令就是 v-if 和 v-for ,因此我们可能会想要同时使用它们.虽然官方不建议这样做,但有时确实是必须的,我们来了解下他们的工作方式: 在 vue 2.x 中,在一个元素上同时使用 v-if 和 v-for 时, v-for 会优先作用. 在 vue 3.x 中, v-if 总是优先于 v-for 生效. 对比学习接下来我们通过一个简单的示例来感知下,假设我们想要实现一个极简的 todoList 效果: 我们有一个 todoList: const todoL
vue的注意规范之v-if 与 v-for 一起使用教程

当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级,这意味着 v-if 将分别重复运行于每个 v-for 循环中所以,不推荐v-if和v-for同时使用使用推荐方式: <ul> <li v-for="user in activeUsers" :key="user.id" > {{ user.name }} </li> </ul> <ul v-if="shouldSh
Vue中判断语句与循环语句基础用法及v-if和v-for的注意事项详解

目录一.判断语句 v-if.v-else.v-else-if v-show 案例二.循环语句遍历数组遍历对象三.v-if和v-for的注意事项总结一.判断语句 v-if.v-else.v-else-if v-if是判断是否将DOM元素显示出来不满足条件的元素,会直接删除,不会存在浏览器上面 v-show 也是用来判断,是否将DOM元素在页面上显示,但是与v-if有着区别,它的不显示是通过display:none;实现的,还是存在浏览上. <div id="app"
Python 专题二条件语句和循环语句的基础知识

前面讲述了"专题一.函数的基础知识",而这篇文章讲述的Python的条件语句和循环语句的基础知识.主要内容包括: 1.条件语句:包括单分支.双分支和多分支语句,if-elif-else 2.循环语句:while的使用及简单网络刷博器爬虫 3.循环语句:for的使用及遍历列表.元组.文件和字符串前言: 语句块在讲诉条件语句.循环语句和其他语句之前,先来补充语句块知识.(前面讲函数时已经用到过) 语句块并非一种语句,它是在条件为真(条件语句)时执行或执行多次(循环语句)的一组语句.在代
C语言中的三种循环语句

目录一.while循环二.do while 循环三.for 循环一.while循环 while即:首先检查启动循环的条件是否满足,当条件满足时,不断地重复循环体内的语句,直到不满足条件就退出. while循环基本形式: while(条件) { <循环体>; <循环体>; } eg: 1 //输入任意个int型,整数并判断其位数#include int main() { int x; intn=0; scanf("%d",&x); n++; x /
Python中条件语句、循环语句和pass语句的使用示例

目录一.条件语句 1.if……else……语句 1)单分支 2)双分支 2.if……elif……else语句 3.多重if嵌套二.循环语句 1.for循环 2.while循环三.pass语句总结一.条件语句条件语句能够改变Python程序的执行流程,是执行这个代码块还是另一个代码块.凡是需要判断来确定下一步如何执行的程序都要使用条件语句. 一般条件语句有 1.if……else…… 2.if……elif……else 3.多重if嵌套 1.if……else……语句 1)单分支单分支实际
Python中条件选择和循环语句使用方法介绍

同C语言.Java一样,Python中也存在条件选择和循环语句,其风格和C语言.java的很类似,但是在写法和用法上还是有一些区别.今天就让我们一起来了解一下. 一.条件选择语句 Python中条件选择语句的关键字为:if .elif .else这三个.其基本形式如下: 复制代码代码如下: if condition: block elif condition: block ... else block 其中elif和else语句块是可选的.对于if和elif只有condition为True时,
JavaScript中三种for循环语句的使用总结（for、for...in、for...of）

前言每个接触JS的开发人员都不可避免的与for循环打交道,毕竟这是遍历必不可少的工具之一.JavaScript 中的 for 循环语句相信大家都已经快用厌了,现在有好多文章都在讲怎么减少代码中的 for 循环语句,但是,你又不得不承认它们真的很有用.今天,我来总结一下前端 JavaScript 中三种 for 循环语句. for 这大概是应用最广的循环语句了吧,简单实用,且大多数时候性能还是在线的,唯一的缺点大概就是太普通,没有特色,导致很多人现在不愿用它. const array = [4,
Python分支语句与循环语句应用实例分析

本文实例讲述了Python分支语句与循环语句应用.分享给大家供大家参考,具体如下: 一.分支语句 1.if else语句语法: if 条件判断: 执行的语句块1 else : 执行语句块2 当满足条件的时候则执行语句块1 ,不满足条件就执行语句块2 注意:1.条件判断后面要加冒号":": 2.执行语句块需要缩进[4个空格]. else 与 if对齐,else后面要加":",语句块缩进4个空格 ''' 从控制台输入年龄,如果年龄小于18岁,打印"未成年人禁
Python条件语句与循环语句

目录 1.条件语句 1.1 if语句 2.嵌套的分支语句 3.案例练习 4.循环语句 4.1 for-in循环 4.2 range()函数 4.3 实例1:计算1-100的和 4.4 实例2:计算1-100偶数的和 4.5 实例3:计算1-100奇数的和 5.while循环 6.break 和 continue 语句 6.1 实例:猜字游戏 7.循环嵌套 7.1 实例1:通过for...in语句打印99乘法表 7.2 实例2:通过while语句打印99乘法表 1.条件语句所谓的条件语句,就是通
python里的条件语句和循环语句你了解多少

目录前言一.条件语句 1.什么是条件语句 2.if 语句的基本形式 3.if 语句多个判断条件的形式 4.if 语句多个条件同时判断 5.if 嵌套二.循环语句 1.什么是循环语句 2. for 循环语句 3. range() 函数 4.While 循环语句 5.for 循环和 whlie 循环的区别 6.嵌套循环三.条件语句和循环语句综合实例 1.打印九九乘法表 2.判断是否是闰年总结前言通常都听到别人说,计算机很牛逼,很聪明,其实计算机一点都不聪明,光是你要跟他沟通,都会气 s
PgSQL条件语句与循环语句示例代码详解

目录 1 条件语句 1.1 elsif可以写多个 1.2 LOOP 循环 2 WHILE 循环 3 FOR 循环 1 条件语句 pgSQL中有两种条件语句分别为if与case语句. if if 语句形式包含以下几种: IF - THEN - END IF IF - THEN - ELSE - END IF IF - THEN - ELSIF - THEN - ELSE - END IF 示例示例函数 test_if,将下方示例语句复制到对应位置即可进行测试. create or replace