<!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>
Wed前端开发-Vue期末满分大作业
版权申诉
5星 · 超过95%的资源 15 浏览量
2022-06-18
16:47:05
上传
评论 8
收藏 164KB ZIP 举报 
新冠疫情防疫信息.zip （5个子文件） 
新冠疫情防疫信息 css 
index.css 575B img 
index.html 5KB js v2.6.10 vue.js 333KB vue.min.js 91KB v3.2.8 vue.global.prod.js 122KB资源评论
isafox2023-06-23简直是宝藏资源，实用价值很高，支持！
s7944967592022-10-31资源很实用，对我启发很大，有很好的参考价值，内容详细。
qq_643838722023-06-30感谢大佬分享的资源给了我灵感，果断支持！感谢分享~- 2301_772964802023-06-13资源内容总结的很到位，内容详实，很受用，学到了~
信笔楠
- 粉丝: 6
- 资源: 2
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
