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

1. 按键修饰符的应用。①姓名：按下回车键时调用方法输出“姓名-密码”；②密码：按下shift+回车时调用方法输出“姓名+密码”

图1 初始效果图

               

   

                   图2 按键修饰符效果图

2. 仿淘宝Tab栏切换，熟悉事件定义Tab栏

   图3 淘宝tab效果图

3. 完成一个二级联动菜单，运行效果如下。

      图4 二级联动菜单

代码可以截图或者复制黏贴实验过程中

1. 1. 按键修饰符的应用。①姓名：按下回车键时调用方法输出“姓名-密码”；②密码：按下shift+回车时调用方法输出“姓名+密码”

    <script>

        new Vue({

            el:'#app',

            data:{

                xi:'',

                mi:'',

                w:''

            },

            methods:{

                shuchu:function(){

                    this.w=this.xi+'-'+this.mi;

                }

            }

        })

    </script>

  • 2. 仿淘宝Tab栏切换，熟悉事件定义Tab栏

    <script>

        new Vue({

            el:'#tab',

            data:{

                curId: 0

            }

        })

    </script>

    <div id="tab">

        <div class="tab-tit">

            <a href="javascript:;" @click="curId=0" :class="{'cur':cuiId=0}">女装</a>

            <a href="javascript:;" @click="curId=1" :class="{'cur':cuiId=1}">鞋子</a>

            <a href="javascript:;" @click="curId=2" :class="{'cur':cuiId=2}">包包</a>

            <a href="javascript:;" @click="curId=3" :class="{'cur':cuiId=3}">男装</a>

        </div>

        <div class="tab-con">

            <div v-show="curId===0">

                <img src="01.jpg" alt="" width="100%">

            </div>

            <div v-show="curId==1">

                <img src="02.jpg" alt="" width="100%">

            </div>

            <div v-show="curId===2">

                <img src="01.jpg" alt="" width="100%">

            </div>

            <div v-show="curId===3">

                <img src="02.jpg" alt="" width="100%">

            </div>

        </div>

  • 3. 完成一个二级联动菜单

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>二级联动菜单</title>

<style type="text/css">

*{

    margin:0;

    padding:0

}

body{

    font-size:12px;

}

.title{

font-size:18px;

line-height:50px;

margin-left:100px;}

.one{

    margin:10px 0;

}

.one label{

    width:100px;

    float:left;

    text-align:right;

    height:20px;

    line-height:20px;

}

.one input{

    border:1px solid #999;

    height:20px;

}

.two{

    padding-left:150px;

}

</style>

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

</head>

<body>

<div id="box">

    <form name="form">

        <div class="title">添加商品信息</div>

        <div class="one">

            <label for="type">所属类别：</label>

            <select v-on:change="getPtext">

                <option v-for="pmenu in menulist" v-bind:value="pmenu.text">

                    {{pmenu.text}}

                </option>

            </select>

            <select>

                <option v-for="submenu in getSubmenu" v-bind:value="submenu.text">

                    {{submenu.text}}

                </option>

            </select>

        </div>

        <div class="one">

            <label for="goodsname">商品名称：</label>

            <input type="text" name="goodsname"/>

        </div>

        <div class="one">

            <label for="price">会员价：</label>

            <input type="text" name="price"/>

        </div>

        <div class="one">

            <label for="number">商品数量：</label>

            <input type="text" name="number"/>

        </div>

        <div class="two">

            <input type="submit" value="添加" />

            <input type="reset" value="重置" />

        </div>

    </form>

</div>

<script type="text/javascript">

    var vm = new Vue({

        el : '#box',

        data:{

            ptext : '数码设备',

            menulist:[{

                text:'数码设备',

                submenu:[

                    {text:'数码相机'},

                    {text:'打印机'},

                    {text:"复印机"},

                ]

            },{

                text:'家用电器',

                submenu:[

                    {text:'电视机'},

                    {text:'电冰箱'},

                    {text:"洗衣机"},

                ]

            },{

                text:'礼品工艺',

                submenu:[

                    {text:'鲜花'},

                    {text:'彩带'},

                    {text:"音乐盒"},

                ]

            }]

        },

        methods : {

            getPtext : function(event){//获取主菜单项

                var x=event.target.selectedIndex;//获取选中项的下标

                this.ptext=this.menulist[x].text;//改变ptext的值

            }

        },

        computed : {

            getSubmenu : function(){//获取子菜单

                for(var i = 0; i < this.menulist.length; i++){

                    if(this.menulist[i].text == this.ptext){

                        return this.menulist[i].submenu;

                    }

                }

            }

        }

    });

</script>

</body>

</html>

1.

按键修饰符的应用。①姓名：按下回车键时调用方法输出“姓名-密码”；②密码：按下shift+回车时调用方法输出“姓名+密码”

  • 2. 仿淘宝Tab栏切换，熟悉事件定义Tab栏

3. 完成一个二级联动菜单

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

1. <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

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

</head>

<body>

    <div id="app">

        姓名：<input type="text" name="" id="x1" v-on:keyup.enter="shuchu" v-model="xi"><br>

        密码：<input type="password" name="" id="x2" v-on:keyup.Shift.enter="shuchu" v-model="mi">

        <p>您的信息：{{w}}</p>

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                xi:'',

                mi:'',

                w:''

            },

            methods:{

                shuchu:function(){

                    this.w=this.xi+'-'+this.mi;

                }

            }

        })

    </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>

    <style>

        #tab{width: 600px;margin: 0 auto;}

        .tab-tit{font-size: 0;width: 600px;}

        .tab-tit a{

            display: inline-block;

            height: 40px;

            line-height: 40px;

            font-size: 16px;

            width: 25%;

            text-align: center;

            background: #e1e1e1;

            color: #333;

            text-decoration: none;

        }

        .tab-tit .cur{

            background: #09f;

            color: #fff;

        }

        .tab-con div{

            border: 1px solid #e7e7e7;

            height: 400px;

            padding-top: 20px;

        }

    </style>

</head>

<body>

    <div id="tab">

        <div class="tab-tit">

            <a href="javascript:;" @click="curId=0" :class="{'cur':cuiId=0}">女装</a>

            <a href="javascript:;" @click="curId=1" :class="{'cur':cuiId=1}">鞋子</a>

            <a href="javascript:;" @click="curId=2" :class="{'cur':cuiId=2}">包包</a>

            <a href="javascript:;" @click="curId=3" :class="{'cur':cuiId=3}">男装</a>

        </div>

        <div class="tab-con">

            <div v-show="curId===0">

                <img src="01.jpg" alt="" width="100%">

            </div>

            <div v-show="curId==1">

                <img src="02.jpg" alt="" width="100%">

            </div>

            <div v-show="curId===2">

                <img src="01.jpg" alt="" width="100%">

            </div>

            <div v-show="curId===3">

                <img src="02.jpg" alt="" width="100%">

            </div>

        </div>

    </div>

    <script>

        new Vue({

            el:'#tab',

            data:{

                curId: 0

            }

        })

    </script>

</body>

</html>

3.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>二级联动菜单</title>

<style type="text/css">

*{

    margin:0;

    padding:0

}

body{

    font-size:12px;

}

.title{

font-size:18px;

line-height:50px;

margin-left:100px;}

.one{

    margin:10px 0;

}

.one label{

    width:100px;

    float:left;

    text-align:right;

    height:20px;

    line-height:20px;

}

.one input{

    border:1px solid #999;

    height:20px;

}

.two{

    padding-left:150px;

}

</style>

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

</head>

<body>

<div id="box">

    <form name="form">

        <div class="title">添加商品信息</div>

        <div class="one">

            <label for="type">所属类别：</label>

            <select v-on:change="getPtext">

                <option v-for="pmenu in menulist" v-bind:value="pmenu.text">

                    {{pmenu.text}}

                </option>

            </select>

            <select>

                <option v-for="submenu in getSubmenu" v-bind:value="submenu.text">

                    {{submenu.text}}

                </option>

            </select>

        </div>

        <div class="one">

            <label for="goodsname">商品名称：</label>

            <input type="text" name="goodsname"/>

        </div>

        <div class="one">

            <label for="price">会员价：</label>

            <input type="text" name="price"/>

        </div>

        <div class="one">

            <label for="number">商品数量：</label>

            <input type="text" name="number"/>

        </div>

        <div class="two">

            <input type="submit" value="添加" />

            <input type="reset" value="重置" />

        </div>

    </form>

</div>

<script type="text/javascript">

    var vm = new Vue({

        el : '#box',

        data:{

            ptext : '数码设备',

            menulist:[{

                text:'数码设备',

                submenu:[

                    {text:'数码相机'},

                    {text:'打印机'},

                    {text:"复印机"},

                ]

            },{

                text:'家用电器',

                submenu:[

                    {text:'电视机'},

                    {text:'电冰箱'},

                    {text:"洗衣机"},

                ]

            },{

                text:'礼品工艺',

                submenu:[

                    {text:'鲜花'},

                    {text:'彩带'},

                    {text:"音乐盒"},

                ]

            }]

        },

        methods : {

            getPtext : function(event){//获取主菜单项

                var x=event.target.selectedIndex;//获取选中项的下标

                this.ptext=this.menulist[x].text;//改变ptext的值

            }

        },

        computed : {

            getSubmenu : function(){//获取子菜单

                for(var i = 0; i < this.menulist.length; i++){

                    if(this.menulist[i].text == this.ptext){

                        return this.menulist[i].submenu;

                    }

                }

            }

        }

    });

</script>

</body>

</html>

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

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

相关文章

MySQL使用

MySQL使用

登录目标数据库 mysql -u root -p123456或指定编码格式登录 mysql -uroot -p密码 --default-character-setutf8 --socketmysql.sock -Amysql > select version();//查看版本号 show databases;//查看数据库有哪些 use xxx; show tables; show create database practice; …
阅读更多...
对待谷歌百度等搜索引擎的正确方式

对待谷歌百度等搜索引擎的正确方式

对待百度、谷歌等搜索引擎的方式是&#xff0c;你要站在搜索引擎之上&#xff0c;保持自己的独立思想和意见。 当谷歌宣布他们将会根据一个名为“Alphabet”的新控股公司来进行业务调整时&#xff0c;在科技界引起了一片恐慌之声。 永远不要说这是一个公司一直在做的事情。不…
阅读更多...
攻防世界---misc---What-is-this

攻防世界---misc---What-is-this

1、下载附件&#xff0c;是一个.gz的文件夹&#xff0c;是linux系统的压缩包后缀 2、在kali中解压&#xff0c;解压之后得到两张图片 3、想把图片拖在物理机中分析&#xff0c;但是拖不了&#xff0c;所以将.gz文件在物理机中改为.zip&#xff0c;解压之后看到了一个没有后缀的…
阅读更多...
TensorFlow2.x基础与mnist手写数字识别示例

TensorFlow2.x基础与mnist手写数字识别示例

文章目录 Github官网文档Playground安装声明张量常量变量 张量计算张量数据类型转换张量数据维度转换ReLU 函数Softmax 函数卷积神经网络训练模型测试模型数据集保存目录显示每层网络的结果 TensorFlow 是一个开源的深度学习框架&#xff0c;由 Google Brain 团队开发和维护。它…
阅读更多...
负反馈放大电路

负反馈放大电路

开环放大倍数&#xff1a;放大电路没有加反馈时的放大倍数A 闭环放大倍数&#xff1a;电路加了反馈信号的放大倍数Af。反馈信号和输出信号的比值称为反馈系数F。 三极管各极电压变化关系 1&#xff0c;三极管的基极和发射极之间是同相关系&#xff0c;当基极电压上升&#x…
阅读更多...
CTFHUB-SQL注入-字符型注入

CTFHUB-SQL注入-字符型注入

目录 查询数据库名 查询数据库中的表名 查询表中数据 总结 此题目和上一题相似&#xff0c;一个是整数型注入&#xff0c;一个是字符型注入。字符型注入就是注入字符串参数&#xff0c;判断回显是否存在注入漏洞。因为上一题使用手工注入查看题目 flag &#xff0c;这里就不…
阅读更多...
rk3568 norflash+pcei nvme 配置

rk3568 norflash+pcei nvme 配置

文章目录 rk3568 norflashpcei nvme 配置1&#xff0c;添加parameter_nor.txt文件2 修改编译规则3 修改uboot4 修改BoardConfig.mk5 修改kernel pcei配置6 编译7 烧录 rk3568 norflashpcei nvme 配置 1&#xff0c;添加parameter_nor.txt文件 device/rockchip/rk356x/rk3568_…
阅读更多...
【面试干货】 Hash 索引和 B+树索引的区别

【面试干货】 Hash 索引和 B+树索引的区别

【面试干货】 Hash 索引和 B树索引的区别 1、Hash 索引2、B 树索引3、区别和适用场景 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在数据库中&#xff0c;索引是一种重要的数据结构&#xff0c;用于加速查询操作。常见的索引包括 Hash 索…
阅读更多...
【C++题解】1265. 爱因斯坦的数学题

【C++题解】1265. 爱因斯坦的数学题

问题&#xff1a;1265. 爱因斯坦的数学题 类型&#xff1a;简单循环 题目描述&#xff1a; 爱因斯坦出了一道这样的数学题&#xff1a;有一条长阶梯&#xff0c;若每步跨 2 阶&#xff0c;则最最后剩一阶&#xff0c;若每步跨 3 阶&#xff0c;则最后剩 2 阶&#xff0c;若每…
阅读更多...
PyTorch学习5：Logistic回归

PyTorch学习5：Logistic回归

文章目录 前言一、分类问题简介二、示例1.示例步骤2.示例代码 总结 前言 介绍利用PyTorch实现Logistic回归的分类问题 一、分类问题简介 分类问题的输出为属于每一个类别的概率&#xff0c;概率值最大的即为所属类别。最常见的Sigmoid函数&#xff1a;Logistic函数。 二、示…
阅读更多...
机器学习--回归模型和分类模型常用损失函数总结（详细）

机器学习--回归模型和分类模型常用损失函数总结（详细）

文章目录 引言 回归模型常用损失函数均方误差&#xff08;Mean Squared Error, MSE&#xff09;均方根误差&#xff08;Root Mean Squared Error, RMSE&#xff09;平均绝对误差&#xff08;Mean Absolute Error, MAE&#xff09;Huber损失&#xff08;Huber Loss&#xff09; …
阅读更多...
ChatTTS 文字生成语言本地模型部署

ChatTTS 文字生成语言本地模型部署

ChatTTS部署 官方信息 [ChatTTS首页](https://chattts.com/)搭建步骤 1、下载源码 git clone https://github.com/2noise/ChatTTS.git 2、按照环境 pip install torch ChatTTS pip install -r requirements.txt 3、下载模型 git clone https://www.modelscope.cn/pzc163/ch…
阅读更多...
CGS与MGS的矩阵正交化-C语言实现

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

格拉姆-施密特正交化和改进的格拉姆-施密特正交化 格拉姆-施密特正交化CGS 数学公式 代码实现&#xff1a; 过程版 矩阵运算实现的难点在于每次运算都是一个向量&#xff0c;需要for循环进行&#xff0c;会带来运算时在代码中的复杂&#xff0c;进而难以理解代码的过程 Q矩阵…
阅读更多...
使用汇编和proteus实现仿真数码管显示电路

使用汇编和proteus实现仿真数码管显示电路

proteus介绍&#xff1a; proteus是一个十分便捷的用于电路仿真的软件&#xff0c;可以用于实现电路的设计、仿真、调试等。并且可以在对应的代码编辑区域&#xff0c;使用代码实现电路功能的仿真。 汇编语言介绍&#xff1a; 百度百科介绍如下&#xff1a; 汇编语言是培养…
阅读更多...
uC-OS-III多任务程序

uC-OS-III多任务程序

目录 一、STM32CubeMX基于HAL库建立工程 1、配置RCC 2、配置SYS 3、配置GPIO输出口 4、串口配置 5、系统时钟频率配置 二、uC/OS-III下载 三、文件移植 1、uC-BSP文件夹中添加文件 2、uC-CONFIG文件夹中添加文件 3、HAL工程的MDK-ARM文件夹设置 4、uC-CPU文件夹设置…
阅读更多...
深度学习 - 梯度下降优化方法

深度学习 - 梯度下降优化方法

梯度下降的基本概念 梯度下降&#xff08;Gradient Descent&#xff09;是一种用于优化机器学习模型参数的算法&#xff0c;其目的是最小化损失函数&#xff0c;从而提高模型的预测精度。梯度下降的核心思想是通过迭代地调整参数&#xff0c;沿着损失函数下降的方向前进&#…
阅读更多...
ssm605基于SSM的游戏商城的设计与实现+jsp【已测试】

ssm605基于SSM的游戏商城的设计与实现+jsp【已测试】

前言&#xff1a;&#x1f469;‍&#x1f4bb; 计算机行业的同仁们&#xff0c;大家好&#xff01;作为专注于Java领域多年的开发者&#xff0c;我非常理解实践案例的重要性。以下是一些我认为有助于提升你们技能的资源&#xff1a; &#x1f469;‍&#x1f4bb; SpringBoot…
阅读更多...
【c语言】qsort函数及泛型冒泡排序的模拟实现

【c语言】qsort函数及泛型冒泡排序的模拟实现

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C语言 目录 一、qsort函数 1.回调函数 2.qsort函数 3.void* 指针 二、泛型冒泡排序的模拟实现 1.比较函数的编写 2.交换函数的编写 3.冒泡排序的编写 4…
阅读更多...
ssm617基于协同过滤技术的网上书城的开发与研究+jsp【已测试】

ssm617基于协同过滤技术的网上书城的开发与研究+jsp【已测试】

前言&#xff1a;&#x1f469;‍&#x1f4bb; 计算机行业的同仁们&#xff0c;大家好&#xff01;作为专注于Java领域多年的开发者&#xff0c;我非常理解实践案例的重要性。以下是一些我认为有助于提升你们技能的资源&#xff1a; &#x1f469;‍&#x1f4bb; SpringBoot…
阅读更多...
loading组件封装原理

loading组件封装原理

以vue3为例&#xff0c;采用ts 的语言 首先可对所需数据定义在接口中 interface Prop{ //核心所需的就是 lading:boolean ,type: lading | skeleton} 进行调用 封装的话采用的是插槽 <div v-if"loading" ><slot name"template"><…
阅读更多...
最新文章

Copyright @ 2022~2023