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

html+CSS+js部分基础运用20

news 文章来源：https://blog.csdn.net/m0_55709044/article/details/139584767 2024/11/7 3:42:29
  • 根据下方页面效果如图1所示，编写程序，代码放入图片下方表格内

    

图1.效果图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>Document</title>

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

</head>

<body>

    <div id="app1">

        <div>

            <button type="button" v-on:click="a1()">{{num}}文字</button>

            <p v-if="flag">考试时沉着冷静认真，易得高分</p>

           

        </div>

       

    </div>

    <script>

        new Vue({

            el:'#app1',

            data:{

                flag:true,

                num:"隐藏"

            },

            methods:{

                a1() {  

                    if(this.flag)this.num="显示"

                    else this.num="隐藏"          

                    this.flag = (this.flag) ? false : true

             

                }

               

            }

        })

    </script>

</body>

</html>

  • 根据下方页面效果图2所示，编写程序，代码放入图片下方表格内

图2.页面效果图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>Document</title>

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

</head>

<body>

    <div id="app1">

        <div>

            <button type="button" v-on:click="a1()">a+1</button>

            <button type="button" v-on:click="a2()">b+1</button>

            <p >number+a={{number+a}}</p>

            <p >number+b={{number+b}}</p>

           

        </div>

       

    </div>

    <script>

        new Vue({

            el:'#app1',

            data:{

                a:28,

                b:28,

                number:2,

            },

            methods:{

                a1() {  

                    this.a=this.a+1

                },

                a2() {  

                    this.b=this.b+1

                }

            }

        })

    </script>

</body>

</html>

三、循环输出没有报道的学生名字。其中，四名学生小明、小红、小华、小思，仅小华已报道。输出效果如图3所示。

图3.效果图

代码填写在下方表格内。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>学生</title>

<style>

    .item{

        text-align: center;

}

</style>

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

</head>

<body>

<div id="app1">

    <div class="item">

        <h3><span>没有报道的学生名单:</span></h3>

          <div class="item" v-for="student in students">

              <li><span  v-if= student.active>{{student.name}}</span></li>

          </div>

    </div>

</div>

<script type="text/javascript">

var vm = new Vue({

    el:'#app1',

    data:{

        students : [{

            name : '小明',

            active : true

        },{

            name : '小红',

            active : true

        },{

            name : '小思',

            active : true

        },{

            name : '小华',

            active : false

        }]

    }

})

</script>

</body>

</html>



 

四、设计一个动态表格，可以手动增加、删除数据。效果如图4所示。

实现要求（不需要考虑样式）：

（1）数据的添加使用双向数据绑定，点击新增可以把相关数据添加到信息表格末尾；

（2）点击删除可以删掉该行发布信息；

（3）序号根据数组索引处理获得；

图4-1 页面初始效果

图4-2 点击新增按钮发表格中添加新填入的信息

图4-3 点击4-1中序号1的删除之后页面效果

<!-- vue-4-1.html -->

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>嘻嘻嘻</title>

        <style type="text/css">

            .div1 {

                margin: 0 auto;

                width: 950px;

                border: 1px dashed #55ed89;

            }

            table {

                border: 1px solid #b96c42;

                text-align: center;

                width: 950px;

                border-collapse: collapse;

            }

            h5 {

                text-align: center;

                color: #00ccc5;

                padding: 15px;

                background: #AFAFAF;

                font-size: 28px;

                height:58px;

            }

            input {

                border-radius: 8px;

                width: 140px;

                height: 35px;

                border:1px dashed #001a80;

            }

        </style>

        <script type="text/javascript" src="vue.js"></script>

    </head>

    <body>

        <div id="vue41">

            <div class="div1">

                <p>

                    <label> <input type="text" placeholder="发布内容" v-model="name"> </label>

                    <label> <input type="text" placeholder="发布人" v-model="author"> </label>

                    <label><input type="text" placeholder="发布时间" v-model="press"> </label>

                    <button @click="add">新增</button><br>

                </p>

                <table border="1">

                    <thead>

                        <tr>

                            <th>序号</th>

                            <th>标题</th>

                            <th>发布人</th>

                            <th>发布时间</th>

                            <th>操作</th>

                        </tr>

                    </thead>

                    <tbody>

                        <tr v-for="(newList,index) in newLists" v-bind:key="newList.id">

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

                            <td>{{newList.name}}</td>

                            <td>{{newList.author}}</td>

                            <td>{{newList.press}}</td>

                            <td width="15%">

                            <span @click="deletel(newList.id,index)">删除</span></td>

                        </tr>

                    </tbody>                

                </table>

            </div>

        </div>

        <script>

            var vm = new Vue({

                el: '#vue41',

                data: {

                    id: '',

                    name: '',

                    press:'',

                    author:'',

                    newLists: [{

                            id: 11,

                            name: '招聘前端工程师',

                            author: '关羽',

                            press: '2020-08-10',

                        },

                        {

                            id: 12,

                            name: '招聘PHP工程师',

                            author: '张飞',

                            press: '2020-08-15',

                        },

                    ]

                },

                methods: {

                    add() {

                            this.newLists.push({

                            id:this.id,

                            name:this.name,

                            press:this.press,

                            author:this.author,

                        })  

                    },

                    deletel : function(id,i) {

                            this.newLists.splice(i,1);

                        },

                }

            })

        </script>

    </body>

</html>

相关文章：

html+CSS+js部分基础运用20

根据下方页面效果如图1所示&#xff0c;编写程序&#xff0c;代码放入图片下方表格内 图1.效果图 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta http-equiv"X-UA-Compatible" conte…...

编程日记 2024/6/11 10:20:14

ISO 19115-2:2019 附录C XML 模式实现

C.1 XML 模式 本文件中定义的 UML 模型的 XML 模式在 ISO/TS 19115-3 中定义的适当 XML 命名空间中提供。新增内容包括&#xff1a; 命名空间前缀模式文件名Metadata for ACquisition (mac)acquisitionInformationImagery.xsdMetadata for Resource Content (mrc)contentInfo…...

编程日记 2024/6/11 10:19:12

DevOps的原理及应用详解（一）

本系列文章简介&#xff1a; 在当今快速变化的商业环境中&#xff0c;企业对于软件交付的速度、质量和安全性要求日益提高。传统的软件开发和运维模式已经难以满足这些需求&#xff0c;因此&#xff0c;DevOps&#xff08;Development和Operations的组合&#xff09;应运而生&a…...

编程日记 2024/6/11 10:14:06

【冲刺秋招，许愿offer】第 三 天（水一天）

【冲刺秋招&#xff0c;许愿offer】第 二 天&#xff08;水一天&#xff09; 知识点牛客emo 知识点 今天端午&#xff0c;上午去摘杏下午理发&#xff0c;一天没咋看电脑。晚上刷刷LeetCode看看八股。 牛客 spring事务失效的情况 捕获到异常&#xff0c;自己手动处理 方法修…...

编程日记 2024/6/11 10:13:05

使用 C# 学习面向对象编程：第 6 部分

继承 亲爱的读者&#xff0c;继承意味着从源头继承一些东西。例如&#xff0c;儿子可以继承父亲的习惯。同样的概念也用于面向对象编程&#xff1b;它是 OOP 的第二大支柱。 继承允许创建一个新类&#xff0c;该新类继承另一个类或基类的属性&#xff0c;继承这些成员的类称为…...

编程日记 2024/6/11 10:12:03

分布式训练基础入门

1.单节点训练 单节点训练也会转换为等价的并行训练&#xff0c;如在GPU内同一wrap内的32个Thread执行同一指令&#xff0c;但处理不同的数据。 训练程序往往实现了一个多层神经网络的执行过程。该神经网络的执行由一个计算图&#xff08;Computational Graph&#xff09;表示。…...

编程日记 2024/6/11 10:11:02

AWS S3存储桶中如何下载文件

AWS S3存储桶中如何下载文件 1.单个下载 AWS S3 控制台提供了下载单个文件的功能&#xff0c;但是不支持直接在控制台中进行批量下载文件。您可以通过以下步骤在 AWS S3 控制台上下载单个文件&#xff1a; 　　1.1登录 AWS 管理控制台。 　　1.2转到 S3 服务页面。 　　1.3单击…...

编程日记 2024/6/11 10:10:01

「网络原理」三次握手四次挥手

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;计网 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 三次握手&四次挥手 &#x1f349;连接管理&#x1f34c;三次握手&#x1f34c;意义&#x1f34c;四次挥手&#x1f34c;TCP 状态转换…...

编程日记 2024/6/11 10:09:00

第二十四章 SOAP 错误处理 - 发生故障时添加 WS-Addressing 标头元素

文章目录 第二十四章 SOAP 错误处理 - 发生故障时添加 WS-Addressing 标头元素%SOAP.Fault12.Code 属性SubcodeValue %SOAP.Fault12.Text 属性Textlang 发生故障时添加 WS-Addressing 标头元素 第二十四章 SOAP 错误处理 - 发生故障时添加 WS-Addressing 标头元素 %SOAP.Fault…...

编程日记 2024/6/11 10:07:58

CSS真题合集（一）

CSS真题合集&#xff08;一&#xff09; 1. 盒子模型1.1 盒子模型的基本组成1.2 盒子模型的实际大小1.3 盒子模型的两种类型1.4 设置盒子模型1.5 弹性盒子模型 2. BFC2.1 主要用途2.2 触发BFC的方法2.2 解决外边距的塌陷问题&#xff08;垂直塌陷&#xff09; 3. 响应式布局3.1…...

编程日记 2024/6/11 10:06:57

Golang | Leetcode Golang题解之第144题二叉树的前序遍历

题目&#xff1a; 题解&#xff1a; func preorderTraversal(root *TreeNode) (vals []int) {var p1, p2 *TreeNode root, nilfor p1 ! nil {p2 p1.Leftif p2 ! nil {for p2.Right ! nil && p2.Right ! p1 {p2 p2.Right}if p2.Right nil {vals append(vals, p1.V…...

编程日记 2024/6/11 10:05:56

离奇问题：java通过poi读取excel单元格的小数时会出错

问题 java通过poi读取excel单元格的小数时会出错&#xff0c;分析后发现是因为会损失精度。 处理的代码 /*** DataFormatter 直接new就行&#xff1a;DataFormatter df new DataFormatter();*/ private String getNumericCellValue(Cell cell, DataFormatter df) {String val…...

编程日记 2024/6/11 10:02:51

前端框架是什么

前端框架是预先编写好的JavaScript代码集合&#xff0c;旨在帮助开发者快速搭建Web应用程序的界面和交互逻辑。以下是一些常见的前端框架&#xff0c;按照字母顺序排列&#xff0c;并简要介绍其特点&#xff1a; Angular 由Google开发&#xff0c;原名AngularJS&#xff0c;后…...

编程日记 2024/6/11 10:01:50

Feign的动态代理如何配置

Feign 本身已经内置了动态代理的功能&#xff0c;它允许你声明一个接口&#xff0c;并通过这个接口来发送 HTTP 请求&#xff0c;而不需要你手动编写发送 HTTP 请求的代码。Feign 会为你创建这个接口的代理实现&#xff0c;并在运行时拦截对这些方法的调用&#xff0c;将它们转…...

编程日记 2024/6/11 9:59:48

ReactRouter——路由配置、路由跳转、带参跳转、新route配置项

目录 写在前面 (一)初步使用router 1.安装react-router-dom 2.创建router结构 3.嵌套路由 4.配置not found页面 (1)确切路由报错页面 (2)未配置路由报错页面 5.重定向 (二)路由跳转 1.组件跳转 2.NavLink 3.js跳转 (三)传递参数 1.searchParams(query)参数 2…...

编程日记 2024/6/11 9:55:43

异步处理耗时逻辑

在 Spring Boot 中实现 RESTful 接口的快速响应&#xff0c;同时在后台继续处理耗时逻辑&#xff0c;可以使用异步处理技术。以下是一个详细的示例&#xff0c;展示如何使用 Async 注解和 CompletableFuture 来实现这一需求。 使用 Async 注解 步骤 1&#xff1a;启用异步支持…...

编程日记 2024/6/11 9:54:41

Switch 之 配置SNMP

Description SNMP&#xff08;Simple Network Management Protocol&#xff0c;简单网络管理协议&#xff09;是一种用于网络管理的协议&#xff0c;它用于在网络中对设备进行监控和管理。 SNMP定义了一种管理框架&#xff0c;其中包括管理站、代理和管理信息库&#xff08;M…...

编程日记 2024/6/11 9:53:40

微软如何打造数字零售力航母系列科普13 - Prime Focus Technologies在NAB 2024上推出CLEAR®对话人工智能联合试点

Prime Focus Technologies在NAB 2024上推出CLEAR对话人工智能联合试点 彻底改变您与内容的互动方式&#xff0c;从内容的创建到分发 洛杉矶&#xff0c;2024年4月9日/PRNewswire/-媒体和娱乐&#xff08;M&E&#xff09;行业人工智能技术解决方案的先驱Prime Focus Techn…...

编程日记 2024/6/11 9:51:38

Nginx之正向代理配置示例和说明

一、NGINX正向代理功能简介 Nginx的正向代理功能允许局域网中的客户端通过代理服务器访问Internet资源。具体来说&#xff0c;Nginx作为一种流行的Web服务器和反向代理服务器&#xff0c;在正向代理方面的应用也相当实用。以下是其正向代理功能的几个关键点&#xff1a; 访问外…...

编程日记 2024/6/11 9:49:35

Linux文件与目录管理

#Linux系统基础 文件与目录管理 一、常用命令 文件、目录操作命令说明cd(cd …/ cd ~/ cd/ cd path)切换目录 cd ~等于 cd /rootls显示目录文件ls -l 或者 ll以详细信息的方式显示目录文件pwd查看当前工作目录cp &#xff08;-i -r&#xff09;复制文件或目录mkdir创建目录,…...

编程日记 2024/6/11 9:46:31

08.组件间通信-插槽

1.默认插槽 父组件 <template><div class"father"><h3>父组件</h3><div class"content"><Category title"热门游戏列表">//默认插槽内容<ul><li v-for"g in games" :key"g.id&quo…...

编程日记 2024/6/11 9:45:29

在AWS上运行的EKS Elastic Kubernetes Service 创建集群Cluster，Node group, Nodes

1. 前提条件 AWS Account: https://aws.amazon.com/free/Installing KubeCtl CLI https://docs.aws.amazon.com/eks/latest/userguide/getting-started-eksctl.htmlEKS Cluster RoleIAM Role for Node GroupVPCEC2 Key Pair which can be used to SSH to the worker nodesAWS …...

编程日记 2024/6/11 9:44:28

10款堪称神器的宝藏软件，相见恨晚

今天给大家带来10款堪称神器的宝藏软件&#xff0c;每一个都非常好用&#xff0c;让你直呼相见恨晚。 1、知犀思维导图 知犀思维导图是大家组织信息、梳理思维的重要利器&#xff0c;它可以帮助我们以图形化的方式呈现思维过程&#xff0c;让整体思路变得清晰直观。通过使用知…...

编程日记 2024/6/11 9:42:26

为什么会选择厚膜作为芯片电阻？

引线键合 引线键合是集成电路 &#xff08;IC&#xff09; 或其他半导体器件与其封装之间互连的常见解决方案。它还可用于将IC连接到其他电子设备或将其他厚膜电路相互连接。引线键合通常被认为是最具成本效益和最灵活的互连技术&#xff0c;用于组装大多数半导体封装。引线键合…...

编程日记 2024/6/11 9:40:24

基本药物采购使用

--医院采购基本药物金额数 select sum(采购基本药物金额数) 采购基本药物金额数 from ( select sum(t.实收金额) 采购基本药物金额数 from 住院费用记录 t,药品规格 a where t.收费细目ida.药品id and t.记录状态1 and a.基本药物基药 and t.收费细目id not in( …...

编程日记 2024/6/11 9:39:22

k8s小型实验模拟

&#xff08;1&#xff09;Kubernetes 区域可采用 Kubeadm 方式进行安装。&#xff08;5分&#xff09; &#xff08;2&#xff09;要求在 Kubernetes 环境中&#xff0c;通过yaml文件的方式&#xff0c;创建2个Nginx Pod分别放置在两个不同的节点上&#xff0c;Pod使用hostPat…...

编程日记 2024/6/11 9:37:21

leetcode168：Excel表列名称

题目链接&#xff1a;168. Excel表列名称 - 力扣&#xff08;LeetCode&#xff09; class Solution { public:string convertToTitle(int columnNumber) {string ss1;int MOD 0;if(columnNumber < 26){ss1 (columnNumber A - 1);return ss1;}while(columnNumber){int MO…...

编程日记 2024/6/11 9:36:18

排课系统1

参考：https://gitee.com/lequal/CourseArrange 软件技术栈 当然，我会逐一解释这些技术栈的含义：### 前端技术栈1. **Vue2.x**：- Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面和单页应用程序（SPA）。- 2.x 表示 Vue.js 的第二个主要版本，它提供了一套响应…...

编程日记 2024/6/11 9:33:15

uni-popup

UniPopup是uni-app框架中的一个轻量级组件&#xff0c;它提供了一种便捷的方式来显示弹出窗口&#xff08;如对话框、通知、选择器等&#xff09;。uni-popup可以帮助开发者在不同平台&#xff08;如Web、H5、小程序等&#xff09;上快速实现一致的用户体验&#xff0c;支持自定…...

编程日记 2024/6/11 9:32:14

torchmetrics，一个无敌的 Python 库！

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;今天为大家分享一个无敌的 Python 库 - torchmetrics。 Github地址&#xff1a;https://github.com/Lightning-AI/torchmetrics 在深度学习和机器学习项目中&#xff0c;模型评估是一个至关重要的环节。为了准确…...

编程日记 2024/6/11 9:31:12

电商网站的模式/厦门站长优化工具

岗位职责1、负责公司手机平台的后台即时通讯(IM)模块的设计&#xff0c;开发和优化工作&#xff0c;并可支持百万级并发量&#xff1b;2、负责IM服务器架构搭建、数据库搭建、后台程序开发、与手机客户端接口的开发&#xff1b;3、负责研究和应用OpenFire、Tigase、Smack、Spar…...

编程日记 2024/11/6 21:52:05

南昌专业网站制作公司/百度sem

背景。元素的背景显示区域在内容区和内边距区&#xff0c;并且边框是画在背景之上的。这就是说如果边框的样式是dotted之类的&#xff0c;则边框空隙之间是可以看到背景的。 可以设置背景的声明有&#xff1a;background-color、background-image、background-position、backgr…...

编程日记 2024/11/6 18:29:18

关于设计的网站/百度学术免费查重入口

1&#xff0c;hbase 全称&#xff1a;hadoop dataBase ,即hadoop数据库 2&#xff0c;使用场景&#xff1a;大数据量&#xff0c;准实时查询 3&#xff0c;特点&#xff1a;面向列&#xff0c;支持独立索引&#xff0c;每个列支持存储多版本&#xff0c;稀疏性&#xff1a;空…...

编程日记 2024/11/6 17:56:02

韩国有哪些专业做汽车的网站/可以推广的软件有哪些

展开全部在现实中&#xff0c;有些时候的条件不是一个&#xff0c;而是一组相关的条件&#xff0c;例如将阿拉伯e69da5e887aa62616964757a686964616f31333337616535数字转换为中文大写&#xff0c;根据分数转换为对应的等级等&#xff0c;都是多条件的结构&#xff0c;在程序中…...

编程日记 2024/11/6 17:49:59

网站建设挣钱吗/潍坊网站建设优化

0 序言泰勒公式&#xff0c;本质上是一种函数的近似&#xff0c;强大之处就在于可以将不同类型的函数&#xff0c;统一用多项式求和的形式进行替换&#xff0c;从而变成多项式的运算。本篇主要是标出常见的几个泰勒展开式、高阶无穷小的计算规则、泰勒公式使用时应该展开到第几…...

编程日记 2024/11/6 15:06:51

兴安网站建设/推广方案万能模板

中文文档:https://seaborn.apachecn.org/#/\qquad英文文档:http://seaborn.pydata.org/ 一.介绍 1.功能: Seaborn是基于Matplotlib且数据结构与Pandas相统一的统计图绘制库,其在Matplotlib的基础上进行了更高级的API封装,使作图更简 单.多数情况下使用Seaborn能作出更有吸引力…...

编程日记 2024/11/6 14:38:10