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 ...
随机推荐
- 01-Python初体验
本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...
- git push 错误,回滚 push操作
作者:故事我忘了￠个人微信公众号:程序猿的月光宝盒 0.记一次使用git push后,覆盖了同事代码的糗事 前言: 都在WebStorm中操作,Idea或者PyCharm同理 为了高度还原尴尬 ...
- Python使用wxpy模块实现微信两两群组消息同步
python使用wxpy模块提供的微信API接口实现两两群组的消息同步 安装模块: pip install wxpy 注意:需要同步的微信群需要保存到通讯录中 以下是自己闲来无事写的代码,暂时还存在以 ...
- 第m大的身份证号码（局部排序代全局、结构体排序）
第m大的身份证号码(点击) 时间限制: 1 Sec 内存限制: 128 MB ...
- （八）slf4j+logback 的配置与使用
logback的配置看这篇:https://www.cnblogs.com/lvchengda/p/13054457.html 使用 @Slf4j 1)安装插件lombok 在eclipse/myec ...
- 《Redis开发与运维》
第1章 初识Redis 1. Redis介绍: Redis是一种基于键值对(key-value)的NoSQL数据库. 与很多键值对数据库不同的是,Redis中的值可以是由string(字符串).has ...
- 百度文本编辑器的toolbars属性值描述
toolbars: [ [ 'anchor', //锚点 'undo', //撤销 'redo', //重做 'bold', //加粗 ...
- RabbitMQ入门，我是动了心的
人一辈子最值得炫耀的不应该是你的财富有多少(虽然这话说得有点违心,呵呵),而是你的学习能力.技术更新迭代的速度非常快,那作为程序员,我们就应该拥有一颗拥抱变化的心,积极地跟进. 在 RabbitMQ ...
- weui上传多图片，前端压缩，base64编码
记录一下在做一个报修功能的心路历程,需求功能很简单,一个表单提交,表单包含简单的文字字段以及图片 因为使用的是weui框架,前面的话去找weui的表单和图片上传组件,说实话,weui的组件写的还不错, ...
- python多线程+生产者和消费者模型+queue使用
多线程简介 多线程:在一个进程内部,要同时干很多事情,就需要同时执行多个子任务,我们把进程内的这些子任务叫线程. 线程的内存空间是共享的,每个线程都共享同一个进程的资源 模块: 1._thread模块 ...