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 ...
随机推荐
- 震惊！ConcurrentHashMap里面也有死循环，作者留下的“彩蛋”了解一下？
JDK BUG 这篇文章,聊一下我最近才知道的一个关于 JDK 8 的 BUG 吧. 首先说一下我是怎么发现这个 BUG 的呢? 大家都知道我对 Dubbo 有一定的关注,前段时间 Dubbo 2.7 ...
- （十三）exec-maven-plugin配置及使用
原文链接:https://www.cnblogs.com/lianshan/p/7358966.html 背景: 如果你想在项maven生命周期内,运行一段java代码,或者一段独立的程序,或者说我们 ...
- 使用Vim写LaTeX代码(Vim+Vimtex+Skim)
最近在写博客的时候发现对数学公式的支持并不好,于是就想寻找一个解决方案.我本身是一个爱折腾的人,有时尽管有现成的解决方案我有事也不愿意去用.于是多方查找资料,想寻求一个自定义的解决方案,最终把自己的目 ...
- cb02a_c++_数据结构_顺序容器_STL_list类_双向链表
/*cb02a_c++_数据结构_顺序容器_STL_list类_双向链表实例化std::list对象在list开头插入元素在list末尾插入元素在list中间插入元素,插入时间恒定,非常快.数组:中间 ...
- JAVA设计模式 1 设计模式介绍、单例模式的理解与使用
数据结构我们已经学了一部分了.是该了解了解设计模式了.习惯了CRUD的你,也该了解了解这一门神器.我为啥要说是神器呢? 因为在大厂的面试环节.以及很多的比如 Springboot Mybatis 等开 ...
- .NET进行客户端Web开发又一利器 - Ant Design Blazor
你好,我是Dotnet9,继上篇介绍Bootstrap风格的BlazorUI组件库后,今天我来介绍另一款Blazor UI组件库:一套基于 Ant Design 和 Blazor 的企业级组件库. 本 ...
- 一文搞懂InnoDB索引存储结构
参考资料:掘金小册:MySQL 是怎样运行的:从根儿上理解 MySQL B+树 我们知道,InnoDB是用B+树作为组织数据形式的数据结构.不论是存放用户记录的数据页,还是存放目录项记录的数据页,我们 ...
- Linux Systemd 详细介绍: Unit、Unit File、Systemctl、Target
Systemd 简介 CentOS 7 使用 Systemd 替换了SysV Ubuntu 从 15.04 开始使用 Systemd Systemd 是 Linux 系统工具,用来启动守护进程,已成为 ...
- 动力节点 mysql 郭鑫 34道经典的面试题三
1.第十五题 15.列出受雇日期早于其直接上级的所有员工编号.姓名.部门名称 思路一:第一步将emp a看成员工表,将emp b 看成领导表,员工表的mgr字段应该等于领导表的主键字段 mysql&g ...
- mybatis面试入门
第一步创建一个java project 导入mybatis需要的jar包,创建与数据库一一对应的javabean对象 第二步:创建mybatis的配置文件 sqlMapconfig.xml 第三步:创 ...