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

Vue入门-指令学习-v-else和v-else-if

v-else和v-else-if

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

语法:v-else v-else-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><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
</head><body><div id="app"><p v-if="gender===1">男</p><p v-else="gender===2">女</p><hr><p v-if="score >= 90">成绩:A</p><p v-else-if="score >= 80">成绩: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="js/vue.js"></script><script>const app = new Vue({//通过el配置选择器,指定Vue管理的是哪个盒子el: '#app',//通过data提供数据data: {gender: 1,score:99}})</script>
</body></html>

页面效果:


http://www.mrgr.cn/news/44141.html

相关文章:

  • jsencrypt实现js加密的另外一种方式(使用node-jsencrypt库)
  • 【AI知识点】归一化(Normalization)
  • 前端的全栈混合之路Meteor篇:开发环境的搭建 -全局安装或使用docker镜像
  • Qt开发技巧(十五)字符串去除空格,跨网段搜索不生效,设置图片显示失败问题,表格视图的批量删除,主动判断字串编码,开启向前查询的属性,画家类载入html来绘制
  • Leecode热题100-560.和为k的子数组
  • 【玩转 JS 函数式编程_008】3.1.2 JavaScript 函数式编程筑基之:箭头函数——一种更流行的写法
  • MATLAB智能优化算法-学习笔记(4)——灰狼优化算法求解旅行商问题【过程+代码】
  • 基于SSM的学生信息管理系统【附源码】
  • Cyber Weekly #27
  • YOLOv8 基于NCNN的安卓部署
  • 上海交通大学《2022年+2023年816自动控制原理真题》 (完整版)
  • [git] github管理项目之环境依赖管理
  • 社会工程学:社工无处不在
  • useradd命令:添加Linux新用户
  • 车载诊断协议DoIP系列 —— DoIP APP 应用层(AL)
  • 【异或和之和 / H】
  • d3底层绘制拓扑图
  • No.5 笔记 | 网络端口协议概览:互联网通信的关键节点
  • CSS基础-盒子模型(三)
  • Chromium 中JavaScript File API接口c++代码实现