Wed前端开发-Vue期末满分大作业_vue期末大作业资源-CSDN文库

共5个文件

js：3个

css：1个

html：1个

版权申诉

wed前端开发

vue.js

5星 · 超过95%的资源 71 浏览量 2022-06-18 16:47:05 上传评论 11 收藏 164KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

新冠疫情防疫信息.zip （5个子文件）

新冠疫情防疫信息

css

index.css 575B

img

index.html 5KB

v2.6.10

vue.js 333KB

vue.min.js 91KB

v3.2.8

vue.global.prod.js 122KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>防疫信息登记</title> <link rel="stylesheet" href="css/index.css"> <script type="text/javascript" src="js/v2.6.10/vue.js"></script> <style> fieldset{ padding:20px; border:5px solid green; } legend{ padding:20px; width: auto; color:seagreen; } </style> </head> <body> <div class="header"> <div id="root1"> <br> <h2>今天天气很{{info}}<button @click="changeWeather">切换天气</button></h2><hr> <h1 align="center">{{name}}防疫信息登记</h1> <h5 align="right"> 记录者: [姓:<input type="text" v-model="firstName"> 名:<input type="text" v-model="lastName">]  </h5> <h4 align="right">全名:<span>{{fullName()}}      </span></h4> </div> </div> <div class="bodycenter"> <div class="left"> <div id="root2"> <br> <h3 class="text-succeed">{{title}}</h3> <input type="text" name="text" placeholder="风险地区" v-model="newLocality"/> <button type="button" class="btn text-active" v-on:click="addLocality" v-on:keyup.enter="addLocality">新增风险地区</button> <ul> <li v-for="(item,index) in localities" class="text-center text-info" v-show="item.show">{{item.locality}} <button class="btn btn-default bg-info" v-on:click="removeLocality(index)" v-model="index">删除</button></li> </ul> </div> </div> <div class="right"> <div id="root3"> <fieldset> <legend>感染新冠者</legend> <p>姓名:<input type="text" v-model="employee.name"></p> <p>年纪:<input type="number" v-model="employee.age"></p> <p> 性别:<select v-model="employee.sex"> <option selected="selected">男</option> <option>女</option> </select> </p> <p> 是否接种全部疫苗:<select v-model="employee.vaccines"> <option selected="selected">是</option> <option>否</option> </select> </p> <p><input type="button" class="btn btn-info" @click="Insert" value="添加"></p> <table > <tr> <th>[ 姓名 ]</th> <th>[ 年龄 ]</th> <th>[ 性别 ]</th> <th>[是否接种全部疫苗]</th> <th>[ 操作 ]</th> </tr> <tr v-for="(item,index) in people" :key="index"> <td align="center">{{item.name}}</td> <td align="center">{{item.age}}</td> <td align="center">{{item.sex}}</td> <td align="center">{{item.vaccines}}</td> <td align="center"><input type="button" @click="Delete(index)" value="删除" class="btn btn-danger"></td> </tr> </table> <h3>今日新增:{{x}}例,痊愈:{{y}}例</h3> </fieldset> </div> </div> </div> <div class="footer"> <br> <p>    无论你此刻处于什么岗位，处于什么地点，大敌当前，该以大局为重，没有大家哪来的小家。我们在家不是隔离，是与病毒作斗争,此刻的我们仅有一一个目标:与病毒抗争到底并取得胜利。而你我都有这份职责和义务。请做好防控措施，尽自我的一份力。</p><br> <h2 align="center">加油,祖国!</h2><br> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false const h=new Vue({ el:'#root1', data:{ firstName:'', lastName:'', name:'新冠疫情', isHot:true, }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods:{ changeWeather(){ this.isHot = !this.isHot }, fullName(){ return this.firstName + '-' +this.lastName } }, }); const l=new Vue({ el:'#root2', data:{ title: '风险地区', localities:[ { locality:'', show:false, } ], newLocality:'', message:'待填写的风险地区为空！！', }, methods:{ addLocality:function(){ if(this.newLocality){ this.localities.splice(0,0,{ locality:this.newLocality, show:true }); this.newLocality='' }else{ alert(this.message) } }, removeLocality:function(index){ this.localities[index].show=false } } }); const r=new Vue({ el:'#root3', data:{ x:0, y:0, employee:{name:'',age:0,sex:'男',vaccines:'是'}, people:[{name:'张三',age:18,sex:'男',vaccines:'是'}, ] }, methods:{ Insert(){ this.people.push(this.employee); this.employee={name:'',age:0,sex:'男',vaccines:'是'} this.x++ }, Delete:function(index){ if(confirm(`恭喜患者-${this.people[index].name}已痊愈,我们离抗疫成功又进一步了!`)){ this.people.splice(index,1); this.y++ } } } }); </script> </html>

评论收藏

内容反馈

版权申诉