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

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

news 2026/3/28 7:31:26
  • 根据下方页面效果如图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

反激电源设计避坑：空载炸管、RCD吸收烧电阻？聊聊DCM模式下那些容易忽略的细节

反激电源实战陷阱解析&#xff1a;从空载炸管到RCD失效的深度拆解 实验室里弥漫着焦糊味&#xff0c;示波器上那条本该稳定的波形突然飙升——这可能是每个电源工程师都经历过的噩梦时刻。反激拓扑看似简单&#xff0c;但当你的设计从仿真进入实测阶段&#xff0c;各种"幽…...

编程新知 2026/3/28 7:19:00

手把手教你用FastBlur打造高级感UI：从对话框背景到沉浸式音乐播放器的完整实现

用FastBlur打造高级UI的实战指南&#xff1a;从对话框到音乐播放器的设计进化 毛玻璃效果早已从iOS的视觉语言演变为现代移动应用设计的通用元素。这种半透明模糊效果不仅能提升界面层次感&#xff0c;还能在不分散用户注意力的情况下创造视觉焦点。本文将带你深入Android平台实…...

编程新知 2026/3/28 7:14:57

一文读懂水面无人艇：每个硬件模块到底负责什么

目录 一、水面无人艇完整系统 二、硬件搭配负责哪些功能 2.1 艇体模块&#xff1a;决定“能不能稳、能不能装、能不能扛风浪” 2.2 动力与航行执行模块&#xff1a;决定“怎么动” 2.3 导航传感器模块&#xff1a;决定“我现在在哪、朝哪、跑多快” 1&#xff09;GPS / 北…...

编程新知 2026/3/28 7:06:54

麦橘超然Flux控制台快速体验：输入文字秒出高清图片

麦橘超然Flux控制台快速体验&#xff1a;输入文字秒出高清图片 1. 为什么选择Flux控制台 如果你正在寻找一个简单高效的AI图像生成工具&#xff0c;麦橘超然Flux控制台值得考虑。这个基于DiffSynth-Studio构建的Web服务&#xff0c;集成了majicflus_v1模型&#xff0c;通过fl…...

编程新知 2026/3/28 6:14:30

Luau数据流分析技术：如何实现精准的类型推断

Luau数据流分析技术&#xff1a;如何实现精准的类型推断 【免费下载链接】luau A fast, small, safe, gradually typed embeddable scripting language derived from Lua 项目地址: https://gitcode.com/gh_mirrors/lu/luau Luau是一种快速、小巧、安全且支持渐进类型化…...

编程新知 2026/3/28 5:36:05

解密革命性构建工具：PoeCharm如何突破传统限制实现高效角色规划

解密革命性构建工具&#xff1a;PoeCharm如何突破传统限制实现高效角色规划 【免费下载链接】PoeCharm Path of Building Chinese version 项目地址: https://gitcode.com/gh_mirrors/po/PoeCharm 在流放之路的复杂游戏生态中&#xff0c;角色构建往往成为玩家面临的最大…...

编程新知 2026/3/28 5:36:05

Qwen3-Embedding国产化部署

从单一型人才到AI带领下的复合型人才 1.1 传统职能的终结 传统软件公司怎么干的&#xff1f; 销售、售前、交付、研发、市场、运维——各司其职&#xff0c;职能清晰。看起来很专业&#xff0c;但实际上是什么&#xff1f;一堆冗余的角色在等活干。 这不是高效&#xff0c;这是…...

编程新知 2026/3/28 4:28:00

AI辅助开发：用提示词让快马AI自动生成技术职级成长路径分析应用

AI辅助开发&#xff1a;用提示词让快马AI自动生成技术职级成长路径分析应用 最近在研究技术职级体系时&#xff0c;发现很多开发者对阿里P10这类高级职位的成长路径特别感兴趣。但手动整理这些信息费时费力&#xff0c;于是尝试用AI辅助开发的方式快速生成一个可视化分析工具。…...

编程新知 2026/3/28 4:23:59

售前客户需求深度挖掘：从表面诉求到核心痛点的五步法

# 003、客户需求深度挖掘&#xff1a;从表面诉求到核心痛点的五步法---上周调一个嵌入式项目&#xff0c;客户说“设备偶尔会死机&#xff0c;重启就好”。我们查了三天的日志&#xff0c;发现是内存泄漏。但真正的问题是什么&#xff1f;是代码质量&#xff1f;不完全是。最后…...

编程新知 2026/3/28 1:48:04

python-flask-djangol框架的膳食营养食谱管理系统

目录需求分析技术选型数据库设计核心功能实现界面设计测试与部署维护与扩展项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作需求分析 膳食营养食谱管理系统需要具备用户管理、食谱管理、营养分析、购物清单生成等功能。系统应支…...

编程新知 2026/3/28 0:51:33