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

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

news 2025/7/8 3:11:08
  • 根据下方页面效果如图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

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/7/6 4:35:02

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/7/7 10:44:29

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/7/7 9:14:28

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/7/7 0:41:18

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/7/2 5:30:43

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/6/17 17:52:51

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2025/7/6 23:41:16

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2025/7/6 14:54:46

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/7/7 3:26:15

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/6/21 9:02:37