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 ...
随机推荐
- 带你轻松了解C# Lock 关键字
相信绝大多数.NET玩家和我一样,常常使用Timer这个对象,而在WPF中使用DispatcherTimer的人也是很多,DispatcherTimer是在UI线程跑的.我们的程序中大多数都会充斥很多 ...
- Windows下搭建Apache网站
目录 Apache下载 Apache安装 httpd.conf文件格式说明 启动服务并测试 Apache下载 在Apache官网底部找到APACHE PROJECT LIST里的HTTP Server ...
- FWT,FST入门
0.目录 目录 0.目录 1.什么是 FWT 2. FWT 怎么做 2.1. 或卷积 2.2.与卷积 2.3.异或卷积 2.4.例题 3. FST 3.1. FST 怎么做 3.2.例题 1.什么是 ...
- （七）MySQL常见的数据类型、约束和标识列
一.MySQL常见数据类型 1.数值型: ①整型:tinyint.smllint.mediumint.int/integer.bigint 图源:尚硅谷李玉婷 案例1:关键表格teacher,分别添加 ...
- 关于Attach *.mdf数据库联想到的备份
要求: 将SQL2008R2的*.mdf ( 当时内部版本不详,此时无挂接在MSSQL服务器上的数据库,只有*.mdf文件 ) --->>> SQL2008R2中,附加到现有SQL2 ...
- Quartz.Net系列（三）：解读Quartz.Net源码领略设计模式在其中的应用
1.Builder(建造者)模式 JobBuilder DateBuilder 其他的Builder(TriggerBuilder.SchedulerBuilder等) 2.抽象工厂模式 ISch ...
- 2019-02-13 思考：1000瓶药水，1瓶有毒，老鼠毒发24h，如何用最少的老鼠在24h内找出毒药？
题目: 现在有1000瓶药水,其中一瓶有毒,一只老鼠喝了在24h后会准时死亡,药水无色无味,如何用最少的老鼠在24h内找出毒药? 分析: 时间限制为24h,说明我们只有一次喂老鼠的机会,需要一波找出来 ...
- 单数据盘或者很多数据盘mount挂载到某个目录
单数据盘挂载背景 /dev/sda盘挂载到/opt/data2,此目录有数据,且postgres进程在写入该目录 单数据盘挂载操作方法 1)查看/opt/data2 目录下有哪些文件 #ls /opt ...
- 常见CSS选择器的权重和优先级
一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a. ...
- Flask框架基础功能
引言 本文简单汇总Flask框架几大基础功能,包括: 路由系统 模板 数据库 几种常用Flask库 一个简单的Flask事例 Flask是一个基于Python,依赖Jinja2模板和WSGI服务的框架 ...