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>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Django render()函数页面渲染

Django render()函数页面渲染

1&#xff0c; render() 函数 在Django框架中&#xff0c;render() 函数是一个非常有用的快捷方式&#xff0c;用于从视图函数返回一个完整的HTTP响应。它负责将给定的模板与上下文数据结合&#xff0c;渲染出最终的HTML页面&#xff0c;并返回一个HttpResponse对象。 from d…
阅读更多...
全能大模型AIGC产品的使用体验、选择倾向与未来展望

全能大模型AIGC产品的使用体验、选择倾向与未来展望

随着人工智能技术的迅猛发展&#xff0c;AIGC&#xff08;人工智能生成内容&#xff09;领域正迎来前所未有的繁荣。其中&#xff0c;全能大模型产品以其强大的生成能力和广泛的应用场景&#xff0c;吸引了众多用户的关注。腾讯元宝APP的上线更是为这一领域注入了新的活力。本文…
阅读更多...
第10周 企业认证、分布式事务，分布式锁方案落地

第10周 企业认证、分布式事务，分布式锁方案落地

第10周 企业认证、分布式事务，分布式锁方案落地 1. 基于Redis提高请求响应**********************************************************************************************本周我们将对企业入驻认证的流程进行落地，并且结合分布式缓存中间件Redis与Redisson进行相关的技术…
阅读更多...
企业（园区）智慧能源双碳平台解决方案

企业（园区）智慧能源双碳平台解决方案

园区作为工业企业集聚区&#xff0c;在提供了大量基础设施和公共服务的同时也成为了碳排放的主要源头。工业园区的耗能约占全社会总耗能的69%&#xff0c;碳排放占全国总排放约31%。工业园区节能、减耗、提质、减碳工作的落实&#xff0c;是我国实现碳达峰碳中和目标的必然要求…
阅读更多...
【python】ModuleNotFoundError: No module named ‘timm’

【python】ModuleNotFoundError: No module named ‘timm’

成功解决“ModuleNotFoundError: No module named ‘timm’”错误的全面指南 一、引言 在Python编程中&#xff0c;经常会遇到各种导入模块的错误&#xff0c;其中“ModuleNotFoundError: No module named ‘timm’”就是一个典型的例子。这个错误意味着你的Python环境中没有安…
阅读更多...
Web安全：Web体系架构存在的安全问题和解决方案

Web安全：Web体系架构存在的安全问题和解决方案

「作者简介」&#xff1a;2022年北京冬奥会网络安全中国代表队&#xff0c;CSDN Top100&#xff0c;就职奇安信多年&#xff0c;以实战工作为基础对安全知识体系进行总结与归纳&#xff0c;著作适用于快速入门的 《网络安全自学教程》&#xff0c;内容涵盖系统安全、信息收集等…
阅读更多...
【毕业设计之微信小程序系列】基于微信小程序的餐厅点餐小程序的设计与实现

【毕业设计之微信小程序系列】基于微信小程序的餐厅点餐小程序的设计与实现

《基于微信小程序的餐厅点餐小程序的设计与实现》 项目效果图 目录大纲 摘要 1、选题及其意义 1.1、设计项目的名称 1.2、研究意义 2、需求分析 2.1、用户需求分析 2.2、功能需求分析 2.3、非功能需求分析 3、系统相关技术概述 3.1、餐饮平台开发相关技术 3.1.1、微信小程序 …
阅读更多...
读AI未来进行式笔记04数字医疗与机器人

读AI未来进行式笔记04数字医疗与机器人

1. 数字医疗 1.1. 20世纪的“现代医学”得益于史无前例的科学突破&#xff0c;使得医疗的方方面面都得到改善&#xff0c;让人类预期寿命从1900年的31岁提高到2017年的72岁 1.2. 现有的医疗数据库和流程将实现数字化 1.2.1. 患者记录 1.2.…
阅读更多...
实时语音交互数字人解决方案，满足不同场景需求

实时语音交互数字人解决方案，满足不同场景需求

北京美摄网络科技有限公司凭借其领先的实时语音交互数字人解决方案&#xff0c;为企业带来了全新的沟通体验与商业机遇。 一、技术革新&#xff0c;开启交互新篇章 美摄科技实时语音交互数字人解决方案&#xff0c;以先进的人工智能和机器学习技术为基础&#xff0c;实现了文…
阅读更多...
批量提取 Word 文档中的全部图片

批量提取 Word 文档中的全部图片

步骤 1、打开 WinRAR 任选一个现成的压缩包双击打开 WinRAR &#xff0c;或从开始菜单打开 WinRAR 2、直接把要提取图片的 Word 文档拖入 WinRAR 菜单区域 1 → 2 → 3&#xff0c;WinRAR 资源管理目录中的 media 就是该 Word 文档所要提取的全部图片所在文件夹 按住&#x…
阅读更多...
人工智能任务5-高级算法工程师需要学习哪些课程与掌握哪些能力

人工智能任务5-高级算法工程师需要学习哪些课程与掌握哪些能力

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能的任务5-高级算法工程师需要学习哪些课程&#xff0c;需要掌握哪些能力。高级算法工程师需要掌握的算法模型有&#xff1a;人脸检测模型MTCNN&#xff0c;人脸识别方法Siamese network、center loss、softm…
阅读更多...
基于协同注意力的视觉-语言嵌入用于机器人手术视觉问题定位回答

基于协同注意力的视觉-语言嵌入用于机器人手术视觉问题定位回答

文章目录 CAT-ViL: Co-attention Gated Vision-Language Embedding for Visual Question Localized-Answering in Robotic Surgery摘要方法实验结果 CAT-ViL: Co-attention Gated Vision-Language Embedding for Visual Question Localized-Answering in Robotic Surgery 摘要…
阅读更多...
今日份动态规划学习(二维01背包+01背包变形)

今日份动态规划学习(二维01背包+01背包变形)

目录 P1877 [HAOI2012] 音量调节 P1877 [HAOI2012] 音量调节 题解&#xff1a;一个入门级别的01背包问题&#xff0c;首先就是为什么能看出是01背包&#xff0c;因为只有两种状态&#xff0c;要不增大音量&#xff0c;要不减小音量&#xff0c;和01背包的选与不选非常近似。但…
阅读更多...
酱菜产业：传承美味，点亮生活

酱菜产业：传承美味，点亮生活

酱菜&#xff0c;这道深受人们喜爱的传统美食&#xff0c;以其独特的风味和营养价值&#xff0c;点亮了我们的日常生活。酱菜产业作为美食文化的重要组成部分&#xff0c;正以其独特的魅力&#xff0c;吸引着越来越多的消费者。 酱菜产业的赵总说&#xff1a;酱菜的制作过程&am…
阅读更多...
C++结合OpenCV进行图像处理与分类

C++结合OpenCV进行图像处理与分类

⭐️我叫忆_恒心&#xff0c;一名喜欢书写博客的在读研究生&#x1f468;‍&#x1f393;。 如果觉得本文能帮到您&#xff0c;麻烦点个赞&#x1f44d;呗&#xff01; 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧&#xff0c;喜欢的小伙伴给个三…
阅读更多...
数据库(24)——外键约束

数据库(24)——外键约束

概念 外键用来让两张表的数据之间建立连接&#xff0c;从而保证数据的一致性和完整性。 具有外键的表称为子表&#xff0c;关联的表称为父表。 语法 添加外键 CREATE TABLE 表名( 字段名 数据类型, .. [CONSTRAINT] [外键名称] FOREIGN KEY (外键字段名) REFERENCES 主表(主…
阅读更多...
CGS与MGS的矩阵正交化-C语言实现

CGS与MGS的矩阵正交化-C语言实现

格拉姆-施密特正交化和改进的格拉姆-施密特正交化 格拉姆-施密特正交化CGS 数学公式 代码实现&#xff1a; 过程版 矩阵运算实现的难点在于每次运算都是一个向量&#xff0c;需要for循环进行&#xff0c;会带来运算时在代码中的复杂&#xff0c;进而难以理解代码的过程 Q矩阵…
阅读更多...
软件测试——白盒测试

软件测试——白盒测试

目录 学习视频来源&#xff1a;1.01什么是白盒测试(Av809778070,P1)_哔哩哔哩_bilibili 1.语句覆盖 2.判定覆盖 3.条件覆盖 4.判定条件覆盖 5.条件组合覆盖 6.路径覆盖 7.基本路径覆盖 学习视频来源&#xff1a;1.01什么是白盒测试(Av809778070,P1)_哔哩哔哩_bilibili …
阅读更多...
正则表达式运用

正则表达式运用

已经写了表达式&#xff0c;下一步就是匹配字符串得到结果 使用matcher的源码&#xff08;匹配&#xff09;普通方法&#xff0c;find&#xff08;寻找&#xff09;合适的代码&#xff0c;看字符串是否匹配成功 是否可以匹配上 匹配么&#xff0c;匹配就留下&#xff0c;fin…
阅读更多...
性能工具之 JMeter 常用组件介绍（三）

性能工具之 JMeter 常用组件介绍（三）

文章目录 一、常用组件介绍二、Sampler&#xff1a;取样器三、Controller:控制器&#xff08;逻辑控制器&#xff09;四、Pre Processor:预处理五、Post Processor:请求之后的处理六、Assertions:断言七、Timer:定时器八、Test Fragment&#xff1a;片段九、Config Element:配置…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023