Vue条件语句中v-if、v-else、v-else-if的用法

简介: 这篇文章详细介绍了Vue中`v-if`、`v-else`和`v-else-if`条件语句的用法,包括它们的正确使用方式、常见的错误以及如何使用`<template>`标签来同时切换多个元素的显示状态。

一个混迹于Github、Stack Overflow、开源中国、CSDN、博客园、稀土掘金、51CTO等 的野生程序员。
目标:分享更多的知识,充实自己,帮助他人
GitHub公共仓库:https://github.com/zhengyuzh
以github为主:
1、分享前端+后端基础知识
2、前后端框架知识+框架使用分析
3、热门前端+后端面试题(实时更新)
4、开源项目(主要包含大学课程设计)

文章目录

  • 1、v-if和v-else结合使用
    • 1.1 出现的错误
  • 2、v-if、v-else-if和v-else的联合使用
    • 2.1 出现的错误
  • 3、如果想要同时切换多个元素
    • 3.1 效果展示

1、v-if和v-else结合使用

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。

     <span v-if="isFlag">我是v-if</span>
     <span v-else>我是v-else</span>

1.1 出现的错误

如果在v-if和v-else中间写入其它标签会出现的问题

在这里插入图片描述


2、v-if、v-else-if和v-else的联合使用

类似于 v-else,v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

      <span v-if="1 == isNum">我是v-if  isNum 是1</span>
      <span v-else-if="2 == isNum">我是第一个v-else-if  isNum 是2</span>
      <span v-else-if="3 == isNum">我是第二个v-else-if  isNum 是3</span>
      <span v-else>我是v-else 我 isNum 是不是1,2,3</span>

测试结果

在这里插入图片描述


2.1 出现的错误

如果不仅跟在对应的元素后,出现的问题

在这里插入图片描述


3、如果想要同时切换多个元素

v-if 是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素


   //按钮改变状态
    <el-button type="primary" @click="changeStatus()">

   //被包裹的内容
    <template v-if="isFlag">
      <div class="bottom">
        <span>我是被包裹的P标签 | </span>
        <span>我是被包裹的P标签 | </span>
        <a href="#">我是超链接标签</a>
      </div>
    </template>

  //方法改变状态
    changeStatus() {
      this.isFlag = !this.isFlag; 
    },

3.1 效果展示

当isFlag的值是true的时候,展示包裹的内容

在这里插入图片描述

当isFlag是false的时候,不展示隐藏的内容

在这里插入图片描述

相关文章
|
23天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
23天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
21 1
|
23天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
27 1
|
23天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
23天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1059 0
|
24天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
26天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
31 1
vue学习第一章
|
26天前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
24 1
vue学习第三章
|
26天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
35 1
vue学习第四章