Vue-表格

需求

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTE-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=l.0"><title>Vue-快速入门</title>
<script src="js/vue.js"></script></head>
<body>
<div id ="app"><table border="1"cellspacing="0" width="60%"><tr><th>姓名</th><th>年龄</th><th>性别</th><th>分数</th><th>等级</th></tr><tr v-for="(user,index) in users" align="center"><th>{{index+1}}</th><th>{{user.name}}</th><th v-if="user.age=0">{{"男"}}</th><th v-else>{{"女"}}</th><th>{{user.score}}</th><th v-if="user.score>=85">{{"优秀"}}</th><th v-else-if="user.score>=60">{{"及格"}}</th><th v-else>{{"不及格"}}</th></tr></table>
</div>
</body>
<script>
//定义vue对象new Vue({el:"#app",//vue接管区域data:{users:[{name:"张三",age:20,sex:"1",score:90},{name:"李四",age:21,sex:"0",score:80},{name:"王五",age:22,sex:"1",score:70},{name:"赵六",age:23,sex:"0",score:60}]},methods:{}})
</script>
</html>

效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/32426.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Git客户端安装步骤详解

git windows7 百度经验:jingyan.baidu.com 方法/步骤 1 从git官网下一个git安装包。 步骤阅读 2 点击git.exe安装程序&#xff0c;点击【next】 ![git的安装和配置](https://imgsa.baidu.com/exp/w500/sign7565f44ba58b87d65042ab1f37092860/21a4462309f790525e5b0144…

软件测试----用例篇(设计测试用例保姆级教程✅)

文章目录 前言一、测试用例概念 二、如何设计测试用例三、设计测试用例的方法3.1基于需求的设计方法3.2具体的设计方法等价类边界值正交法判定表法场景法错误猜测法 前言 在软件开发过程中&#xff0c;测试用例是至关重要的一环。它们帮助软件开发人员和测试人员确定软件是否按…

如何识别商业电子邮件诈骗

复制此链接到微信打开阅读全部已发布文章 不要关闭它标签&#xff01;我知道很少有词组比商业、电子邮件和妥协更无趣。 但这不是一篇无聊的文章&#xff1a;这是一篇关于电子邮件骗子的文章&#xff0c;根据联邦调查局的说法&#xff0c;他们每年通过诈骗人们赚取 260 亿美元…

AU音频重新混合音频,在 Adobe Audition 中无缝延长背景音乐,无缝缩短BGM

导入音频&#xff0c;选中音频&#xff0c;并且点 New Multitrack Session 的图标 设计文件名和存储路径&#xff0c;然后点 OK 点 Essential Sound 面板点 Music &#xff08;如果没有这个面板 点菜单栏 Windows > Essential Sound 调出来&#xff09; 点 Duration 展…

利用定时器1产生全双工软件串口

代码; /*《AVR专题精选》随书例程3.通信接口使用技巧项目&#xff1a;使用AVR定时器1和外中断实现全双工软件串口文件&#xff1a;softuart.c说明&#xff1a;软件串口驱动文件作者&#xff1a;邵子扬时间&#xff1a;2012年12月16日*/ #include "softuart.h"// 内部…

Pytorch调试出错记录

一、搭建环境&#xff1a; LINUX-64 1、 nvidia-smi &#xff1a;NVIDIA-SMI 470.63.01 Driver Version: 470.63.01 CUDA Version: 11.4 2、安装conda&#xff1a;下载最新版上传安装 3、安装pytorch&#xff08;安装成功&#xff0c;但可能报错&#xff09; : conda in…

软件功能测试和性能测试包括哪些测试内容?又有什么联系和区别?

软件功能测试和性能测试是保证软件质量和稳定性的重要手&#xff0c;无论是验证软件的功能正确性&#xff0c;还是评估软件在负载下的性能表现&#xff0c;这些测试都是必不可少的。 一、软件功能测试   软件功能测试是指对软件的各项功能进行验证和确认&#xff0c;确保软件…

【递归、搜索与回溯】floodfill算法一

floodfill算法一 1.floodfill算法简介2.图像渲染3.岛屿数量4.岛屿的最大面积 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f603; 1.floodfill算法…

【ATU Book - i.MX8系列 - OS】NXP i.MX Linux Desktop (Ubuntu) BSP 开发环境架设

一、概述 谈论嵌入式系统的开发环境&#xff0c;不得不提起近年来相当实用的 Yocto 建构工具。此工具拥有极为灵活的平台扩展性&#xff0c;广泛的软体套件与社群支持、多平台支援整合性&#xff0c;能够满足开发者特定需求和多种热门的嵌入式系统架设&#xff0c;已成为当今顶…

实战篇:GY-906红外测温模块 + 万年历(定时器计数中断版本) -STM32篇

本文章基于兆易创新GD32 MCU所提供的2.2.4版本库函数开发 向上代码兼容GD32F450ZGT6中使用 后续项目主要在下面该专栏中发布&#xff1a; https://blog.csdn.net/qq_62316532/category_12608431.html?spm1001.2014.3001.5482 感兴趣的点个关注收藏一下吧! 电机驱动开发可以跳转…

第10章 启动过程组 (制定项目章程)

第10章 启动过程组 9.1制定项目章程&#xff0c;在第三版教材第356~360页&#xff1b; 文字图片音频方式 视频12 第一个知识点&#xff1a;主要输出 1、项目章程&#xff08;重要知识点&#xff09; 项目目的 为了稳定与发展公司的客户群(抽象&#xff0c;非具体) 可测量的项目…

探索Agent AI智能体的未来

随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;Agent AI智能体正成为一种改变世界的新力量。这些智能体不仅在当前的技术领域中发挥着重要作用&#xff0c;而且在未来将以更深远的影响改变我们的生活、工作和社会结构。本文将探讨Agent AI智能体的现状、潜…

微信小程序-伪类选择器

一.伪类选择器 结构伪类常见书写方式&#xff1a; 第一类&#xff1a;找第几个孩子 1. :first-child 找第一个孩子2. :last-child 找最后一个孩子3. :nth-child()&#xff0c;正着找数字&#xff1a;写数字几就是找第几个孩子&#xff0c;2n或者even:找偶数2n1或者o…

“论微服务架构及其应用”写作框架,软考高级,系统架构设计师

论文真题 论微服务架构及其应用近年来&#xff0c;随着互联网行业的迅猛发展&#xff0c;公司或组织业务的不断扩张&#xff0c;需求的快速变化以及用户量的不断增加&#xff0c;传统的单块&#xff08;Monolithic&#xff09;软件架构面临着越来越多的挑战&#xff0c;已逐渐…

一个关于空格的Sql Server面试题

引子 先上题目&#xff1a; 回答下面sql 的输出结果 declare s1 varchar(10) declare s2 varchar(10) set s1a b set s2a b if s1s2 select true 答案是 true 那么上面的 s1 和 s2 是否相等的呢&#xff1f; 我们再看看下面的sql declare s1 varchar(10) declare s2 …

【建议收藏】Android中高级大厂面试源码秘籍,为你备战2021金三银四,直通大厂

首先来说下为什么要读源码&#xff0c;有学习源码的必要吗&#xff1f; 为什么要阅读源码&#xff1f; 关于为什么阅读和学习源码&#xff0c;我个人认为可能有以下几点&#xff1a; &#xff08;一&#xff09;吊打面试官&#xff0c;应对面试 为了找到更好的工作&#xff…

异地局域网纯软件组网如何设置?

在现代社会中&#xff0c;随着企业的不断扩张和分布&#xff0c;异地办公成为一种常见的工作模式。随之而来的是&#xff0c;如何实现异地局域网的组网设置成为了一个挑战。在这种情况下&#xff0c;采用纯软件组网方案是一种有效的解决方案。本文将介绍异地局域网纯软件组网设…

双非本,3年时间从外包到阿里P6(Android岗),看我是怎么逆袭成功的?

而在小公司&#xff0c;因为我也在小公司呆过&#xff0c;所以我有最直接的感受。整个部门技术人员没几个&#xff0c;我又大学刚毕业&#xff0c;带我的人&#xff0c;问啥啥不会&#xff0c;只有一个大佬&#xff0c;跳槽来的&#xff0c;是我们技术总监&#xff0c;有问题谁…

python数据分析案例-信用卡违约预测分析

一、研究背景和意义 信用卡已经成为现代社会中人们日常生活中不可或缺的支付工具&#xff0c;它不仅为消费者提供了便利&#xff0c;还为商家提供了更广泛的销售渠道。然而&#xff0c;随着信用卡的普及和使用量的增加&#xff0c;信用卡违约问题逐渐成为金融机构面临的重要挑…