day78 作业
1 在作业.html的代码基础上，完成商品数量的加减，注意商品数量如果低于0个，则自动删除当前商品
2 在作业.html的代码基础仧，完成购物车总价格的计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#goods table{
width: 600px;
border:1px solid #000;
border-collapse: collapse;
}
#goods td,#goods th{
border: 1px solid #000;
}
#goods .box{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #eee;
width: 280px;
height: 160px;
padding: 40px 80px;
}
</style>
<script src="/vue/vue.js"></script>
</head>
<body>
<!--1. 在作业.html的代码基础上，完成商品数量的加减，注意商品数量如果低于0个，则自动删除当前商品-->
<!--2. 在作业.html的代码基础仧，完成购物车总价格的计算。-->
<div id="goods">
<button @click="is_show=true;goods_index=-1;">添加商品</button>
<table>
<tr>
<th>商品编号</th>
<th>商品标题</th>
<th>商品数量</th>
<th>商品价格</th>
<th>操作</th>
</tr>
<tr v-for="goods,index in goods_list">
<td>{{index+1}}</td>
<td>{{goods.name}}</td>
<td>
<button @click="sub(index)">-</button>
<input type="text" size="2" v-model="goods.num">
<button @click="goods.num++">+</button>
</td>
<td>{{goods.price.toFixed(2)}}</td>
<td>
<button @click="update(index)">编辑</button>
<button @click="del(index)">删除</button>
</td>
</tr>
<tr>
<td colspan="5">总计： {{sum}}元</td>
</tr>
</table>
<div class="box" v-show="is_show">
商品标题: <input type="text" v-model="goods_name"><br><br>
商品数量: <input type="text" v-model="goods_num"><br><br>
商品价格: <input type="text" v-model="goods_price"><br><br>
<button @click="save">保存</button>
<button @click="cancel">取消</button>
</div>
</div>
<script>
var vm = new Vue({
el:"#goods",
data:{
is_show:false,
goods_name:"",
goods_num:"",
goods_price:"",
goods_index:-1, // 当前本次操作的商品信息[-1表示新增,大于0表示编辑]
goods_list:[
{"name":"python入门","num":27,"price":150},
{"name":"python进阶","num":21,"price":100},
{"name":"python高级","num":17,"price":75},
{"name":"python研究","num":37,"price":60},
{"name":"python放弃","num":57,"price":110},
]
},
methods:{
save(){
// 保存数据[添加数据]
if(this.goods_index==-1){
this.goods_list.push({
"name":this.goods_name,
"num":parseInt(this.goods_num),
"price":parseFloat(this.goods_price),
});
}else{
this.goods_list[this.goods_index].name=this.goods_name;
this.goods_list[this.goods_index].num=parseInt(this.goods_num);
this.goods_list[this.goods_index].price=parseFloat(this.goods_price);
}
this.cancel();
},
cancel(){
this.is_show=false;
this.goods_index= -1;
this.goods_name= "";
this.goods_num= "";
this.goods_price= "";
},
del(index){
// 删除数据
this.goods_list.splice(index,1);
},
update(index){
// 先弹窗
this.is_show=true;
// 显示当前编辑的商品信息
this.goods_index=index;
this.goods_name=this.goods_list[index].name;
this.goods_num=this.goods_list[index].num;
this.goods_price=this.goods_list[index].price;
// 当用户点击保存时，修改对应数据
},
sub(index){
let num = this.goods_list[index].num
console.log(num)
if(num==0){
this.goods_list.splice(index,1)
}else {
this.goods_list[index].num--
}
}
},
computed:{
sum(){
let all_count = 0
for(var i=0;i<this.goods_list.length;i++){
all_count += this.goods_list[i].num*this.goods_list[i].price
}
return all_count
}
},
})
</script>
</body>
</html>
3 使用ajax获取北京天气，并把昨天和未来5天天气情况以表格格式展示到html页面中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="/vue/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
<div id="app">
<table class="table table-hover">
<thead>
<tr>
<th>时间</th>
<th>风力</th>
<th>风向</th>
<th>最高温</th>
<th>最低温</th>
</tr>
</thead>
<tbody>
<tr v-for="city_weather in weather">
<td>{{city_weather.date}}</td>
<td>{{city_weather.fengli}}</td>
<td>{{city_weather.fengxiang}}</td>
<td>{{city_weather.high}}</td>
<td>{{city_weather.low}}</td>
</tr>
</tbody>
</table>
<input type="text" v-model="city">
<button @click="get_weather" class="btn btn-info" >点击</button>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
city:'北京',
weather:[]
},
methods:{
get_weather(){
axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
.then(response=>{
this.weather=response.data.data.forecast
}).catch(error=>{
console.log(error.data)
})
}
}
})
</script>
</body>
</html>
day78 作业的更多相关文章
- python10作业思路及源码：类Fabric主机管理程序开发（仅供参考）
类Fabric主机管理程序开发 一,作业要求 1, 运行程序列出主机组或者主机列表(已完成) 2,选择指定主机或主机组(已完成) 3,选择主机或主机组传送文件(上传/下载)(已完成) 4,充分使用多线 ...
- SQLServer2005创建定时作业任务
SQLServer定时作业任务:即数据库自动按照定时执行的作业任务,具有周期性不需要人工干预的特点 创建步骤:(使用最高权限的账户登录--sa) 一.启动SQL Server代理(SQL Server ...
- 使用T-SQL找出执行时间过长的作业
有些时候,有些作业遇到问题执行时间过长,因此我写了一个脚本可以根据历史记录,找出执行时间过长的作业,在监控中就可以及时发现这些作业并尽早解决,代码如下: SELECT sj.name , ...
- T-SQL检查停止的复制作业代理，并启动
有时候搭建的复制在作业比较多的时候,会因为某些情况导致代理停止或出错,如果分发代理时间停止稍微过长可能导致复制延期,从而需要从新初始化复制,带来问题.因此我写了一个脚本定期检查处于停止状态的分 ...
- Python09作业思路及源码：高级FTP服务器开发（仅供参考）
高级FTP服务器开发 一,作业要求 高级FTP服务器开发 用户加密认证(完成) 多用户同时登陆(完成) 每个用户有不同家目录且只能访问自己的家目录(完成) 对用户进行磁盘配额,不同用户配额可不同(完成 ...
- 个人作业week3——代码复审
1. 软件工程师的成长 感想 看了这么多博客,收获颇丰.一方面是对大牛们的计算机之路有了一定的了解,另一方面还是态度最重要,或者说用不用功最重要.这些博客里好些都是九几年或者零几年就开始学习编 ...
- 个人作业-week2：关于微软必应词典的案例分析
第一部分 调研,评测 评测基于微软必应词典Android5.2.2客户端,手机型号为MI NOTE LTE,Android版本为6.0.1. 软件bug:关于这方面,其实有一些疑问.因为相对于市面上其 ...
- 软件工程第二次作业——git的使用
1. 参照 http://www.cnblogs.com/xinz/p/3803109.html 的第一题,每人建立一个GitHub账号,组长建立一个Project,将本组成员纳入此Porject中的 ...
- hadoop作业调度策略
一个Mapreduce作业是通过JobClient向master的JobTasker提交的(JobTasker一直在等待JobClient通过RPC协议提交作业),JobTasker接到JobClie ...
随机推荐
- ZooKeeper搭建集群
ZooKeeper ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性 ...
- 测试-spring源码摘取
首次加载idea是真的慢... 也许是我电脑性能太差... 我分析他内部有一套索引的机制,需要每次打开现建立... 没有固态的话,首次打开还不如eclipse 第一次使用博客园,以前都在csdn混~ ...
- render props的运用
2020-04-03 render props的运用 术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术 通常的 这个值为函数的prop ...
- 2019-02-08 Python学习之Scrapy的简单了解
今天遇到的问题和昨天差不多,一个Scrapy装了好久,anaconda卸了又装,pycharm卸了又装,环境变量配置一堆,依赖包下载一堆.查了一堆资料总算是搞好了. Scripy: 先放个框架结构图( ...
- （五）使用logback进行日志记录
原文:https://www.cnblogs.com/taiyonghai/p/9290641.html 引入jar包 此处如果是引用了spring boot则不需要再引一下的jar包了,spring ...
- Node.js躬行记（4）——自建前端监控系统
这套前端监控系统用到的技术栈是:React+MongoDB+Node.js+Koa2.将性能和错误量化.因为自己平时喜欢吃菠萝,所以就取名叫菠萝系统.其实在很早以前就有这个想法,当时已经实现了前端的参 ...
- 记一次Idea+Gradle编译Spring源码遇到的坑
打算开始研究Spring源码,于是照着书上的指导从网上下载了Spring5.0.2版本和Gradle4.0(必须JDK1.8.60以上),本地编译的时候没有任何问题,就是导入Idea的时候一直报下面这 ...
- Redis 数据结构 之 SDS
SDS(simple dynamic string),简单动态字符串.s同时它被称为 Hacking String.hack 的地方就在 sds 保存了字符串的长度以及剩余空间.sds 的实现在 sd ...
- selenium（4）-针对键盘的操作
有哪些键盘操作 删除键 空格键 制表键 回退键 回车键 全选 复制 剪切 粘贴 F1-F12 ......其实就是所有键盘都能模拟,包括alt.shift.insert.delete.home等等等. ...
- linux环境下搭建Jenkins持续集成（Jenkins+git+shell+maven+tomact）
准备环境 jenkins.war包 ,jdk1.8 ,tomact , maven,git 1.Jenkins war包,下载地址https://jenkins.io/zh/download/ ...