《vue教程课件》-《vue教程课件》-第3章习题参考答案_第1页
《vue教程课件》-《vue教程课件》-第3章习题参考答案_第2页
《vue教程课件》-《vue教程课件》-第3章习题参考答案_第3页
《vue教程课件》-《vue教程课件》-第3章习题参考答案_第4页
《vue教程课件》-《vue教程课件》-第3章习题参考答案_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

一、1、DAAABBABCDCCD实践题1、<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>ad</title><Scriptsrc="vue3.js"></script><scriptsrc="axios.min.js"></script><style>#app{width:600px;height:800px;border:1pxsolidred;margin:0auto;}#ad{background:url(1.png)no-repeat;width:600px;height:800px;border:1pxsolid#ccc;margin:0auto;}#login{background-color:beige;width:600px;height:800px;border:1pxsolid#ccc;margin:0auto;}#login#title{font:30px;text-align:center;padding-top:30px;}#loginp{margin:0auto;text-align:center;}.mobil{border:blueviolet1pxsolid;border-radius:10px;padding:10px;height:30px;line-height:30px;margin:5px10px;width:80%;border:none}p#btn{height:50px;line-height:50px;background-color:blueviolet;width:80%;border-radius:5px;padding:5px;font-size:20px;margin:10pxauto;}pbutton,pbutton:focus{background-color:blueviolet;;display:inline-block;border:none;width:100%;height:50px;line-height:50px;outline:none;}</style></head><body><divid="app"><divid="ad"v-show=back><h3@click=jump>点击跳转{{n}}秒</h3></div><divid=loginv-show=!back><h2id=title>欢迎登录</h2><p><inputclass=mobiltype="text"placeholder="手机号码"v-model=mobil><br><spanv-show="!mobil">手机号码不能为空</span></p><pclass=pwd><inputclass=mobiltype="text"placeholder="登录密码"v-model=pwd><br><spanv-show="!pwd">登录密码不能为空</span></p><pid=btn><button:disabled="!mobil||!pwd"@click=login>登录</button></p></div></div><script>varapp={data(){return{n:9,back:true,timer:null,mobil:'',pwd:''}},methods:{autoPlay(){this.timer=setInterval(this.play,1000)},play(){this.n--;if(this.n==1){this.back=false;clearInterval(this.timer)}},jump(){this.back=false;clearInterval(this.timer)},login(){if(!this.mobil||!this.pwd)return;axios.post("/api/user/reg",{username:this.mobil}).then((res)=>{console.log(res)}).catch((err)=>{console.log(err)})}},mounted(){this.autoPlay()},unmounted(){clearInterval(this.timer)}}varvm=Vue.createApp(app).mount("#app")</script></body></html>2、<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>vuecheck</title><Scriptsrc="vue3.js"></script><style>#app{width:800px;border:1pxsolid#eee;border:1pxsolidRed;margin:0auto;box-sizing:border-box;}#left{width:50%;float:left;height:400px;;border:1pxsolid#333;box-sizing:border-box;}.dataItem{width:100px;height:50px;line-height:50px;display:inline-block;border:1pxsolidred;text-align:center;margin:10px;}.selected{background-color:red;color:#fff;}#right{float:right;border:1pxsolid#ccc;height:400px;width:50%;box-sizing:border-box;}#right#xx{position:relative;top:-10px;color:#ccc;left:10px;}</style></head><body><divid="app"><divid="left"><p>全部{{leftData.length}}已选中{{selectedNum}}</p><spanclass=dataItemv-for="(v,i)inleftData":key=v.id:class="v.flag?'selected':''"@click=add(v)>{{}}</span></div><divid="right"><p>已选中{{rightNum}}</p><liclass=dataItemv-for="(v,i)inrightData"@mouseover="cur=i"@mouseout="cur='hide'":key=v.id>{{}}<spanid=xx@click=del(v,i)v-show="cur==i">x{{v.id}}</span></li></div></div><script>varapp={data(){return{leftData:[{name:"陕西省",id:1,flag:false},{name:"山西省",id:2,flag:false},{name:"河南省",id:3,flag:false},{name:"河北省",id:4,flag:false},{name:"黑龙江省",id:5,flag:false},{name:"辽宁省",id:6,flag:false},{name:"江苏省",id:7,flag:false},{name:"湖北省",id:8,flag:false},{name:"湖南省",id:9,flag:false},{name:"云南省",id:10,flag:false},],rightData:[],cur:'hide'}},computed:{selectedNum(){returnthis.leftData.filter(item=>item.flag).length},rightNum(){returnthis.rightData.length}},methods:{add(v){v.flag=true;this.rightData.push(v)this.rightData=[...newSet(this.rightData)];},del(v,i){this.rightData.splice(i,1)this.leftData.forEach(item=>{if(v.id==item.id)item.flag=false});this.cur='hide'}}}varvm=Vue.createApp(app).mount("#app")</script></body></html>3、<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>vueToDoList</title><scriptsrc="vue3.js"></script><style>#app{width:600px;margin:0auto;box-sizing:border-box;}#top{width:600px;height:100px;background-color:rgb(153,255,127);border:1pxsolid#eee;text-align:center;}#top.jihua{background-color:red;color:#fff;border-radius:50%;width:20px;height:20px;display:inline-block}#center{width:100%;box-sizing:border-box;}#centerinput{border-radius:5px;height:50px;line-height:50px;border:1pxsolid#0ef;background-color:bisque;width:80%;box-sizing:border-box;}#centerbutton{height:50px;line-height:50px;width:20%;border-radius:5px;box-sizing:border-box;}#center.jihua{width:200px;height:50px;line-height:50px;;border:1pxsolid#eee;text-align:center;display:inline-block;box-sizing:border-box}#center.selected{background-color:chartreuse;}#bottomul{list-style:none;line-height:50px;}#bottomulli#item{width:200px;display:inline-block}#bottom.through{text-decoration:line-through;}#bottombutton{background-color:cornflowerblue;height:30px;border:1pxsolid#ccc;border-radius:5px;color:#eee}</style></head><body><divid="app"><divid="top"><h2>Vue学习计划</h2><p>共有<spanclass=jihua>{{this.items.length}}</span>计划，<spanclass=jihua>{{wc}}</span>已完成<spanclass=jihua>{{wwc}}</span>未完成</p></div><divid="center"><inputtype=textplaceholder="输入您的计划，单击添加计划，开始行动"v-model=input><button@click=addid=btn>添加计划</button><p><spanclass=jihua:class="this.curIndex==1?'selected':''"@click="filterItem(1)">所有计划</span><spanclass=jihua:class="this.curIndex==2?'selected':''"@click="filterItem(2)">已完成</span><spanclass=jihua:class="this.curIndex==3?'selected':''"@click="filterItem(3)">未完成</span></p></div><divid="bottom"><ul><liv-for="(item,index)innewItems":key=index><inputtype=checkboxv-model="item.check"><spanid=item:class="item.check?'through':''">{{}}</span><button@click=del(item)>删除{{item.id}}</button></li></ul></div></div><script>varapp={data(){return{input:"",items:[{name:"vue2",check:true,id:1},{name:"vue3",check:false,id:5}],newItems:[],curIndex:1}},computed:{wc:function(){returnthis.items.filter(item=>item.check).length},wwc:function(){returnthis.items.filter(item=>!item.check).length}},mounted(){this.filterItem(this.curIndex)},methods:{add:function(){if(!this.input)return;if(this.items.length>0){var_id=Math.max(...this.items.map(v=>v.id))+1;}else{_id=1}this.items.unshift({name:this.input,check:false,id:_id})this.input=""},del(v){//varn=this.items.findIndex(function(item){//returnitem.id==v.id//})//this.items.splice(n,1)this.items=this.items.filter(item=>item.id!=v.id)this.filterItem(this.curIndex)},filterItem(i){this.curIndex=i||this.curIndexswitch(i){case1:this.newItems=this.items;break;case2:this.newItems=this.items.filter(item=>item.check);break;case3:this.newItems=this.items.filter(function(item){returnitem.check==false});break;default:this.newItems==this.items}}}}varvm=Vue.createApp(app).mount("#app")</script></body></html>4、<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>购物车</title><scriptsrc="vue3.js"></script><style>table{border:1pxsandybrownsolid;border-spacing:0;border-collapse:collapse;}th,td{border:1pxsolidnavajowhite;padding:6px10px;text-align:center;}th{background-color:#f7f7f7;color:olive}</style></head><divid="app"><divv-if="books.length"><table><thead><th>全选<inputtype=checkbox:checked=isCheckedAll@click=checkboxAll()/></th><th>书名</th><th>出版日期</th><th>价格</th><th>数量</th><th>操作</th></thead><tbody><trv-for="(item,index)inbooks":key=item.id><td><inputtype="checkbox"v-model=item.isChecked></td><td>{{item.bookname}}</td><td>{{item.date}}</td><td>{{item.price}}</td><td><button@click=add(index)>+</button>{{item.count}}<button@click=less(index):disabled="item.count<=1">-</button></td><td><button@click=del(index)>删除</button></td></tr></tbody></table><h2>总价：￥{{totalPrice}}</h2></div><h2v-else>购物为空</h2></div><script>constapp={data(){return{books:[{id:1,bookname:'《计算机基础》',date:"2015-9",price:35,count:1,isChecked:true},{id:2,bookname:'《单

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论