| 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>
<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>
<!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; } |
html+CSS+js部分基础运用18
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
