HTML的

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量235 收藏 6
点赞数 3
文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77161151/article/details/137206798
版权
文章描述了一个HTML页面，使用Vue.js构建了一个包含动态表格（显示学生姓名、科目和成绩，以及删除功能）和数据输入表单的示例。表格根据用户输入的数据实时更新总分和平均分。
摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .boss {

            width: 1000px;

            height: 500px;

            display: flex;

            margin: 0 auto;

        }

        .box1 {

            flex: 8;

            height: 100%;

            box-sizing: border-box;

            padding: 50px;

        }

        .box2 {

            flex: 4;

            height: 100%;

            box-sizing: border-box;

            padding: 50px 0;

            font-size: 20px;

        }

        .box2 input {

            width: 200px;

            height: 50px;

            margin-bottom: 20px;

            font-size: 16px;

        }

        button {

            width: 70px;

            height: 40px;

            margin-left: 60px;

            background-color: rgb(0,101,158);

            color: #fff;

            border-radius: 10px;

            border: none;

        }

    </style>

</head>

<body>

    <div id="app">

        <div class="boss">

            <div class="box1">

                <table width="100%" border="1" cellpadding="0" cellspacing="0" align="center">

                    <tr style="background-color: rgb(245,245,245);border: none;" height="40px">

                        <th>编号</th>

                        <th>姓名</th>

                        <th>科目</th>

                        <th>成绩</th>

                        <th>操作</th>

                    </tr>

                    <tr style="text-align: center;border: none;" height="40px" v-for="(item,index) of arr">

                        <td>{{index+1}}</td>

                        <td>{{item.userName}}</td>

                        <td>{{item.km}}</td>

                        <td v-if="item.cj>=60">{{item.cj}}</td>

                        <td style="color: red;" v-if="item.cj<60">{{item.cj}}</td>

                        <td>

                            <div style="text-decoration: underline;cursor: pointer;" @click="sc(index)">删除</div>

                        </td>

                    </tr>

                   

                </table>

                <table width="100%" border="1" cellpadding="0" cellspacing="0" align="center">

                    <tr style="text-align: center;border: none;" v-if="xs" height="40px">

                        <td style="border: none;text-align: right;">总分:</td>

                        <td style="border: none;text-align: left;padding-left: 20px;box-sizing: border-box;">{{zf}}</td>

                        <td style="border: none;text-align: right;">平均分：</td>

                        <td style="border: none;padding-left: 20px;box-sizing: border-box;text-align: left;">{{pjf}}</td>

                        <!-- <td style="border: none;"></td> -->

                    </tr>

                </table>

               

            </div>

            <div class="box2">

                姓名：<input type="text" v-model="obj.userName" placeholder="请输入姓名">

                <br>

                科目：<input type="text" v-model="obj.km" placeholder="请输入科目">

                <br>

                分数：<input type="text" v-model="obj.cj" placeholder="请输入分数">

                <br>

                <button @click="tj()">添加</button>

            </div>

        </div>

    </div>

</body>

<script src="./vue.js"></script>

<script>

    Vue.config.productionTip = false;

    var vm = new Vue({

        el:"#app",

        data(){

            return{

                arr:[],

                xs:true,

                zf:"",

                pjf:"",

                arrs:[],

                sum1:0,

                ys:{},

                obj:{

                    userName:"",

                    km:"",

                    cj:"",

                },

            }

        },

        methods:{

            tj(){

                this.arr.push(this.obj);

                this.obj.cj=Number(this.obj.cj);

                   this.sum1+=this.obj.cj;

                    console.log(this.sum1);

                    this.zf=this.sum1;

                    this.pjf=(this.sum1/this.arr.length).toFixed(1);

                this.obj={

                    userName:"",

                    km:"",

                    cj:""

                }

                if(this.pjf=="NaN"){

                    this.pjf=0;

                }

            },

            sc(a){

                console.log(this.arr[a].cj);

                this.sum1-=this.arr[a].cj;

                this.zf=this.sum1;

                this.arr.splice(a,1)

                this.pjf=(this.sum1/this.arr.length).toFixed(1);

                if(this.pjf=="NaN"){

                    this.pjf=0;

                }

            }

        }

    })

</script>

</html>

接着看日落
关注
HTML星空特效
兔子王
06-19 3万+
100行代码实现HTML星空特效。
HTML动态爱心
兔子王
06-04 5万+
本文主要是对某音爆火的html爱心代码做简单的解析，需要代码文末自取哦~
HTML期末设计——代码篇
greengirl5的博客
06-22 13万+
事先声明 这个网页设计也就是用了我学到的知识做的一个中规中矩的网页，可以给以后的大一新生们做个参考，和商业网站的效果肯定是没得比的，期望太高的可以关掉了 引入页 效果图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>欢迎来到香氛密语</title> <style>
HTML入门与进阶以及HTML5
wuyxinu的博客
12-12 38万+
目录 一、简介 1、前端开发最核心技术 （1）HTML是什么？ （2）CSS （3）JavaScript 2、前端开发其他技术 二、基础内容 1.基础总结 2.HTML的基本标签 (1)HTML标签 (2)head标签 (3)body标签 3、段落与文字 (一)、段落标签 (二)、网页特殊符号 (三)、自闭合标签 (四)、块元素和行内元素 (五)、练...
制作一个简单HTML个人网页网页（HTML+CSS）
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
HTML零基础入门教程（详细）
ZONGXP的博客
10-22 22万+
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。 HTML 指的是超文本标记语言:HyperTextMarkupL...
前端页面的简单学习与项目搭建（主要针对HTML和VUE的学习）
热门推荐
张彦峰的博客
04-09 169万+
备注：只是本人的自学与备注，自己本身不是做前端的，只是简单搭建一些前端的东西，自己玩的。 一、HTML简单的回顾 （一）HTML 基本结构 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html&...
HTML超链接
m0_48289363的博客
04-09 2万+
超链接，外部链接，内部链接，空链接，下载链接，网页元素链接，锚点链接
HTML表格（HTML 表格的使用，收藏这一篇就够了）
weixin_47139649的博客
10-15 6万+
HTML基础之表格 文章目录HTML基础之表格1. 表格的定义2. 表格的标签3. 单元格边框(border)4. 合并单元格4.1 合并行单元格(colspan)4.2 合并列单元格(rowspan)5. 表格格式设置5.1 单元格的对齐（align）（居中，左对齐，右对齐）5.2. 背景色&图片（bgcolor & background）5.2.1 单元格背景色&图片5.2.2 表格背景色&图片5.3 单元格的边距（cellpadding）5.4 单元格间的距离(cel
【方法】HTML网页调用本地Python程序
crazyang的博客
05-07 18万+
代码已上传github 首先声明，在HTML中调用本地Python程序是十分不推荐的，一是因为网页调用本地程序的权限正在被取消，二是因为真不如JS写直接，三是只能在自己本地调用。 但如果你要用，像我一样，需要在课堂上进行一个Python代码的展示，并且想要一个好看的UI界面的话，可以这样来做，做起来还是很容易的，但这样的展示仅限于需要弹框的，比如我的人脸检测是弹窗式，如果需要内嵌在网页内...
一套后台管理html模版
08-04
【标题】：“一套后台管理html模版” 这套后台管理HTML模板是专为构建高效、功能丰富的后台管理系统界面设计的。HTML模版是前端开发的基础，它定义了网页的结构和样式，使得开发者能够快速搭建出美观且易于操作的...
HTML动态爱心代码爱心满屏
11-07
HTML动态爱心代码满屏爱心免费下载
网上订餐系统模板html源码
06-11
网上订餐系统模板HTML源码是一个用于构建在线订餐平台的前端资源，它包含了实现基本功能所需的HTML文件。由于描述中提到该源码是静态的，这意味着它不包含任何服务器端代码或与数据库的交互，因此它主要用于展示界面...
纯HTML网页源码
11-02
HTML，全称HyperText Markup Language，即超文本标记语言，是构建互联网页面的基础。它是一种标记语言，通过一系列标签来描述网页的结构和内容。"纯HTML网页源码"指的是只包含HTML代码，不依赖其他如JavaScript、CSS...
爱心代码 李峋同款爱心等免费下载 exe、py、html格式
11-12
【标题】"爱心代码 李峋同款爱心等免费下载 exe、py、html格式" 提供了一组与编程相关的资源，这些资源包含了不同格式的爱心图案实现，包括可执行文件（exe）、Python脚本（py）以及HTML页面（html）。这暗示我们...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 209
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
【React 】开发环境搭建详细指南
lph159的博客
07-24 982
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
VUE中的重点*
qq_61132537的博客
07-22 928
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 521
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
HTML基础知识详解
"HTML知识点汇总" HTML（HyperText Markup Language）是一种标记语言，用于构建和组织网页的结构。它是Web开发的基础，允许开发者通过各种标签来指定网页内容的样式和布局。以下是对HTML部分核心知识点的详细说明：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值