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

1、完成输入框内容的实时反向输出。

2、银行账户余额变动自动通知项目。

设计要求：单击按钮后，余额按照输入框的数额减少，同时将按钮式的提示信息（金额）同步改变。利用侦听属性实现余额发生变化时发出提示信息，同时记录每次支出明细，每笔记录包含支取次数，支取金额、余额等信息。

3、学生信息采集

① 定义Vue实例，分别完成el、data、methods、watch等选项的配置

  1. 定义data，分别定义为name、province、city、street、address等初始值（为空）
  2. 定义methods选项。在其中定义getAddress()方法，其功能是讲变化的省份、城市、县、街道信息组合起来，赋值个家庭地址
  3. 定义watch选项。在其中定义handler()方法，并使用immediate/deep等属性，设置他们的值为true，立即触发视图更新，并深度侦听相关属性值的变化。分别定义province、city、street等属性，将新值赋值给相关属性，立即渲染。

② 信息采集。分别通过表单输入获取省份、城市、县、街道等信息，只要其中有一个值发生变化，都需要绑定keyup事件，调用getAddress()方法，触发更新家庭地址。

  • 1.

    <div id="app">

        <hr>

        输入内容：<input type="text" v-model="message"><br>

        反转内容：{{message.split('').reverse().join('')}}

    </div>

  • 借助message.split('').reverse().join('')完成输入框内容的实时反向输出。
  • 2.

  new Vue({

            el:'#app',

            data:{

               

                money1:100000,

                money2:500,

                money3:100000,

                sum:0,      

            },

            watch:{

                money3:{

                    handler:function(newValue,oldValue){

                        alert("账户余额由"+oldValue+"元变为"+newValue+"元");

                        console.log("账户余额由"+oldValue+"元变为"+newValue+"元")

                    }

                }

               

                       

                   

               

            },

            methods:{

                updata:function(){

                    this.money3=this.money3-this.money2;

                    this.money1=this.money3;

                    this.sum=this.sum+1;

                    var objSelect=document.getElementById("number8");  

                    objSelect.focus();

                    var s=null;

                    s="第"+this.sum+"次，支取"+this.money2+"元，余额为"+this.money1;

                    objSelect.options.add(new Option(s,));

                    this.money2=0;        

                   

                },

  • 借助vue框架监听加methods中的方法完成银行账户余额变动自动通知项目。
  • 3.

    <script>

        new Vue({

            el:"#app",

            data:{              

               

                    province:'',              

                    city:'',

                    street:'',

                    address:'',  

                           

            },

            watch:{

                province:{

                    handler: function (newValue, oldValue) {

                    console.log("对象记录：新值："+newValue + "--------- 旧值："+oldValue)

                },

                }

            },

            methods:{

                getAddress:function(){

                   this.address=this.province+" "+this.city+" "+this.street;

               }

            }

        })

    </script>

  • 借助Vue框架watch方法和methods方法完成大部分功能。

1

2

3

JavaScript使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交互的表达能力。从而基于CGI静态的HTML、页面将被可提供动态实时信息并可监视信息变化。

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="app">

        <hr>

        输入内容：<input type="text" v-model="message"><br>

        反转内容：{{message.split('').reverse().join('')}}

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                message:''

            }

        })

    </script>

</body>

</html>

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="app">

        <h3>银行账户余额变更通知</h3>

        余额为：{{money1}}元<br>

        支取人民币为：<input type="text" v-model="money2"><button v-on:click="updata">支取{{money2}}元</button><br>

        支取后人民币余额为：{{money3}}元<br>

        <h3>以下是支出明细账</h3>

        <hr size="2">

        <table>

            <tr>

                <td rowspan="3">

        <select name="number7" id="number8" size="2" οnfοcus=”this.select()” οnmοuseοver=”this.focus()”>

        </select>

                </td>

            </tr>

        </table>

    </div>

    <script>

       

        new Vue({

            el:'#app',

            data:{

               

                money1:100000,

                money2:500,

                money3:100000,

                sum:0,      

            },

            watch:{

                money3:{

                    handler:function(newValue,oldValue){

                        alert("账户余额由"+oldValue+"元变为"+newValue+"元");

                        console.log("账户余额由"+oldValue+"元变为"+newValue+"元")

                    }

                }

               

                       

                   

               

            },

            methods:{

                updata:function(){

                    this.money3=this.money3-this.money2;

                    this.money1=this.money3;

                    this.sum=this.sum+1;

                    var objSelect=document.getElementById("number8");  

                    objSelect.focus();

                    var s=null;

                    s="第"+this.sum+"次，支取"+this.money2+"元，余额为"+this.money1;

                    objSelect.options.add(new Option(s,));

                    this.money2=0;        

                   

                },

      }

            }

        )

    </script>

</body>

</html>

3.

<!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="app">

        <form action="">

            <fieldset>

                <legend align="center">学生地址信息采集</legend>

                姓名：<input type="text" v-model="name"><br>

                <hr>

                省份：<input type="text" v-model="province" v-on:keyup="getAddress()"><br>

                城市：<input type="text" v-model="city" v-on:keyup="getAddress()"><br>

                县、区或街道：<input type="text" v-model="street" v-on:keyup="getAddress()"><br>

                家庭地址：<input type="text" v-model="address" v-on:keyup="getAddress()"><br>

                <input type="submit" value="提交">&nbsp;&nbsp;&nbsp;<input type="reset" value="重置">

               

            </fieldset>

        </form>

    </div>

    <script>

        new Vue({

            el:"#app",

            data:{              

               

                    province:'',              

                    city:'',

                    street:'',

                    address:'',  

                           

            },

            watch:{

                province:{

                    handler: function (newValue, oldValue) {

                    console.log("对象记录：新值："+newValue + "--------- 旧值："+oldValue)

                },

                }

            },

            methods:{

                getAddress:function(){

                   this.address=this.province+" "+this.city+" "+this.street;

               }

            }

        })

    </script>

</body>

</html>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

LabVIEW减压阀和温控阀综合测试系统

LabVIEW减压阀和温控阀综合测试系统

在使用LabVIEW开发阀门测试软件时&#xff0c;特别是针对减压阀和温控阀&#xff0c;测试内容和注意事项包括以下方面&#xff1a; 测试内容 压力测试&#xff1a; 入口压力&#xff1a;测量阀门在不同入口压力下的表现。 出口压力&#xff1a;确保减压阀能够将出口压力控制在…
阅读更多...
【一百零六】【算法分析与设计】并查集的实现,P3367 【模板】并查集,sizee集合的元素个数信息

【一百零六】【算法分析与设计】并查集的实现,P3367 【模板】并查集,sizee集合的元素个数信息

并查集的实现 描述 给定一个没有重复值的整形数组arr&#xff0c;初始时认为arr中每一个数各自都是一个单独的集合。请设计一种叫UnionFind的结构&#xff0c;并提供以下两个操作。 boolean isSameSet(int a, int b): 查询a和b这两个数是否属于一个集合 void union(int a, int …
阅读更多...
学习笔记——IP地址网络协议——VLSM-可变长子网掩码(子网划分)

学习笔记——IP地址网络协议——VLSM-可变长子网掩码(子网划分)

四、VLSM-可变长子网掩码(子网划分) 1、为什么要子网划分 为什么要子网划分&#xff1a;有类IP地址规划的缺陷。IP地址空间只能按照默认的类别使用&#xff0c;例如一个B类地址&#xff0c;默认掩码为255.255.0.0&#xff0c;意味着这个地址空间里有2的16次方个IP&#xff0c;…
阅读更多...
IDEA的使用配置Maven(及selenium+webdriver的下载配置)

IDEA的使用配置Maven(及selenium+webdriver的下载配置)

一. 下载maven 1. maven官网下载链接 2.​​安装第二行第一列的zip压缩包 ​​​​​​​​ 二. 配置环境变量 1.新建环境变量 2.在系统变量Path环境变量中添加%Maven_HOME%\bin 三.验证环境变量是否配置成功 winr >cmd>mvn -v 如果出现Maven的版本信息&#xff0…
阅读更多...
Nginx设置缓存后，访问网页404 问题原因及解决方案（随手记）

Nginx设置缓存后，访问网页404 问题原因及解决方案（随手记）

目录 问题描述Nginx文件 解决方案查看error_log日志问题原因修改文件并测试Nginx文件测试 总结 问题描述 在Nginx中设置缓存expires后&#xff0c;结果重启nginx&#xff0c;网站访问404了。 Nginx文件 server {listen 80;server_name bird.test.com;location / {root /app/…
阅读更多...
PID算法在电机速度控制上的应用

PID算法在电机速度控制上的应用

目录 概述 1 系统硬件框架 1.1 框架介绍 1.2 硬件实物图 2 STM32Cub生成工程 2.1 软件版本信息 2.2 配置参数 ​编辑2.3 生成项目 3 PID算法实现 3.1 概念 3.2 代码实现 4 其他功能实现 4.1 设置电机速度 4.2 PID算法控制电机 4.3 功能函数的调用 5 测试 5.1 …
阅读更多...
Java中常用的单目运算符及用法详解

Java中常用的单目运算符及用法详解

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…
阅读更多...
2024年清洁能源与可持续发展国际会议（ICDESMF 2024）

2024年清洁能源与可持续发展国际会议（ICDESMF 2024）

2024 International Conference on Clean Energy and Sustainable Development 【1】大会信息 会议简称&#xff1a;ICDESMF 2024 大会时间&#xff1a;2024-07-22 大会地点&#xff1a;中国大理 截稿时间&#xff1a;2024-07-08(以官网为准&#xff09; 审稿通知&#xff1a…
阅读更多...
JFinal学习06 控制器——getPara()接收数据

JFinal学习06 控制器——getPara()接收数据

JFinal学习06 控制器——getPara()接收数据 视频来源https://www.bilibili.com/video/BV1Bt411H7J9/?spm_id_from333.337.search-card.all.click 文章目录 JFinal学习06 控制器——getPara()接收数据零、JFinal数据提交的三种方式一、get提交二、post提交三、url参数化提交四、…
阅读更多...
【全开源】Shopro社区团购(小程序版)

【全开源】Shopro社区团购(小程序版)

邻里间的购物新选择 基于Fastadmin后端管理系统Uniapp客户端&#xff08;仅支持微信小程序&#xff09;开发&#xff0c;生鲜果蔬社区团购的不二之选、快速搭建社区团购平台、让你的产品走进上千个社区。线上团购线下自提&#xff0c;玩转社区消费新模式提供专业、优质的社区团…
阅读更多...
计算机网络 期末复习（谢希仁版本）第5章

计算机网络 期末复习（谢希仁版本）第5章

**屏蔽作用&#xff1a;**运输层向高层用户屏蔽了下面网络核心的细节&#xff08;如网络拓扑、所采用的路由选择协议等&#xff09;&#xff0c;使应用进程看见的就是好像在两个运输层实体之间有一条端到端的逻辑通信信道。 10. 端口用一个 16 位端口号进行标志&#xff0c;允许…
阅读更多...
Linux—小小内核升级

Linux—小小内核升级

本篇主要是讲述下关于内核的一些基本常识&#xff0c;并记录下内核升级和编译的过程&#xff0c;若有遗漏/有误之处&#xff0c;望各位大佬们指出。 Ⅰ 基本内核常识 常见内核安装包 内核(kernel)&#xff1a;这是Linux操作系统的核心部分&#xff0c;它负责管理系统的硬件和…
阅读更多...
信号（上）

信号（上）

本节目标&#xff1a; 1. 掌握Linux信号的基本概念 2. 掌握信号产生的一般方式 3. 理解信号递达和阻塞的概念&#xff0c;原理。 4. 掌握信号捕捉的一般方式。 5. 重新了解可重入函数的概念。 6. 了解竞态条件的情景和处理方式 7. 了解SIGCHLD信号&#xff0c; 重新编写信号处理…
阅读更多...
实现k8s网络互通

实现k8s网络互通

前言 不管是docker还是k8s都会在物理机组件虚拟局域网&#xff0c;只不过是它们实现的目标不同。 docker&#xff1a;针对同一个物理机&#xff08;宿主机&#xff09; k8s&#xff1a;针对的是多台物理机&#xff08;宿主机&#xff09; Docker 虚拟局域网 K8S虚拟局域网 …
阅读更多...
2024-06-05-记一次cnvd渗透

2024-06-05-记一次cnvd渗透

前言&#xff1a;挖src挖郁闷了&#xff0c;闲来无事选择挖一个cnvd来练练手&#xff0c;本次的漏洞都没啥难度&#xff0c;企查查资产过了5000万 说一下cnvd证书的下放标准 对于中危及中危以上通用型漏洞&#xff08;CVSS2.0基准评分超过4.0分&#xff09;&#xff0c;以及涉…
阅读更多...
Wireshark抓包工具使用 项目实战

Wireshark抓包工具使用 项目实战

Wireshark 是一个开源的网络协议分析器&#xff0c;它可以让你捕获和分析网络数据包&#xff0c;帮助你诊断网络问题、监控网络流量、分析协议和进行安全审计。以下是一些基本的 Wireshark 用法&#xff1a; 捕获数据包&#xff1a; 打开 Wireshark&#xff0c;选择要捕获数据包…
阅读更多...
13- Redis 中的 压缩列表 数据结构

13- Redis 中的 压缩列表 数据结构

压缩列表的最大特点&#xff0c;就是它被设计成一种内存紧凑型的数据结构&#xff0c;占用 一块连续的内存空间&#xff0c;不仅可以利用 CPU 缓存&#xff0c;而且会针对不同长度的数据&#xff0c;进行相应编码&#xff0c;这种方法可以有效的节省内存开销。 但是&#xff0…
阅读更多...
C#-foreach循环语句

C#-foreach循环语句

foreach循环语句 语法&#xff1a; foreach(数据类型 变量名 in 数组或集合对象) { 语句块; } foreach 会在每次循环的过程中&#xff0c;依次从数组或集合对象中取出一个新的元素放foreach( )里定义的变量中&#xff0c;直到所有元素都成功取出后退出循环。 foreach循环…
阅读更多...
Mysql root用户远程连接失败解决方案

Mysql root用户远程连接失败解决方案

最近&#xff0c;踩坑云服务器通过root用户远程连接Mysql数据库失败&#xff0c;Mysql 版本为 5.7.44&#xff0c;原因如下&#xff0c;因为root用户权限过大&#xff0c;可能会有风险操作&#xff0c;可以新增其他用户来解决此问题&#xff0c;如果一定要用root用户&#xff0…
阅读更多...
C# Onnx E2Pose人体关键点检测

C# Onnx E2Pose人体关键点检测

C# Onnx E2Pose人体关键点检测 目录 效果 模型信息 项目 代码 下载 效果 模型信息 Inputs ------------------------- name&#xff1a;inputimg tensor&#xff1a;Float[1, 3, 512, 512] --------------------------------------------------------------- Outputs ---…
阅读更多...
最新文章

Copyright @ 2022~2023