当前位置: 首页 > article >正文

Vue指令:v-else、v-else-if

目录

 

1.语法:

2. 题目

3.页面展示 

4.结构 


1.语法:

   1.作用:辅助v-if进行判断渲染

   2.语法:v-else 、v-esle-if="表达式"

2. 题目

<!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">
        <p v-if="gender==1">性别:♂ 男</p>
        <p v-else>性别:♀ 女</p>
    <hr>
    <p v-if="score>=90">成绩评定A:奖励电脑一台</p>
    <p v-else-if="score>=70">成绩评定B:奖励周末郊游</p>
    <p v-else-if="score>=60">成绩评定C:奖励零食礼包</p>
    <p v-else>成绩评定D:惩罚一周不能玩手机</p>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:"#app",
            data:{
                gender:1,
                score:100
            }
        })

    </script>
</body>
</html>
3.页面展示 

4.结构 

 


http://www.kler.cn/a/380838.html

相关文章:

  • 搭建Elastic search群集
  • pyinstaller打包资源文件和ini配置文件怎么放
  • C++ OpenGL学习笔记(4、绘制贴图纹理)
  • DataX与DataX-Web安装与使用
  • Unity 6 Preview(预览版)新增功能
  • 深度学习的DataLoader是什么数据类型,为什么不可用来索引
  • 展示+分享|美创科技@2024年数据安全关键技术研究及产业应用成果大会
  • 【云备份】httplib库
  • 信息安全工程师(77)常见网络安全应急事件场景与处理流程
  • 拓展学习-golang的基础语法和常用开发工具
  • 【LeetCode】【算法】234.回文链表
  • Spring Data Redis的基本使用
  • Spring Boot 与 Vue 共铸卓越采购管理新平台
  • OpenID Connect 和 OAuth 2.0 有什么不同?
  • 揭秘rust中默认参数类型不为人知的秘密,你确定不来了解下吗?
  • Java 基于SpringBoot+Vue 的公交智能化系统,附源码、文档
  • Django Form 实现多层(嵌套)模型表单
  • 深度学习模块创作(缝合)教程|适合1-360月小宝宝食用,干货满满
  • 深度学习基础知识-损失函数
  • 【C/C++】memcpy函数的模拟实现
  • Mac OS 配置Docker+Mysql
  • C++中的继承——第一篇
  • ​CSS之三
  • 【OJ题解】C++实现字符串大数相乘:无BigInteger库的字符串乘积解决方案
  • vue中强制更新视图
  • 网络信息系统的整个生命周期