作业题目：
1.在作业.html的代码基础上，完成商品数量的加减，注意商品数量如果低于0个，则自动删除当前商品
2.在作业.html的代码基础上，完成购物车总价格的计算。
3.使用ajax获取北京天气，并把昨天和未来5天天气情况以表格格式展示到html页面中
作业1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#goods {
margin:200px;
text-align: center;
font-size: 16px;
}
#goods table {
width: 700px;
border: 2px solid #000;
border-collapse: collapse;
}
#goods td, #goods th {
border: 1px solid #000;
height: 40px;
}
#goods .box {
position: fixed;
top: 250px;
left: 920px;
background-color: #eee;
padding: 50px;
border-radius: 10px;
}
th, td{
text-align: center;
}
tr th{
text-align: center;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="goods">
<button @click="is_show=true;goods_index=-1;" class="btn btn-success">添加商品</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)" class="btn btn-primary btn-sm">编辑</button>
<button @click="del(index)" class="btn btn-warning btn-sm">删除</button>
</td>
</tr>
<tr>
<td colspan="5">合计:{{total}}元</td>
</tr>
</table>
<div class="box" v-show="is_show">
<input type="text" v-model="goods_name" class="form-control" placeholder="商品名称"><br>
<input type="text" v-model="goods_num" class="form-control" placeholder="商品数量"><br>
<input type="text" v-model="goods_price" class="form-control" placeholder="商品价格"><br>
<button @click="save" class="btn btn-info">保存</button>
<button @click="cancel" class="btn btn-danger">取消</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": 10, "price": 10},
{"name": "Python初阶", "num": 10, "price": 20},
{"name": "Python中阶", "num": 10, "price": 30},
{"name": "Python高阶", "num": 10, "price": 40},
{"name": "Python删库", "num": 10, "price": 50},
{"name": "Python跑路", "num": 10, "price": 60},
{"name": "Python入狱", "num": 10, "price": 1},
{"name": "Python判刑", "num": 10, "price": 2},
{"name": "Python顿悟", "num": 10, "price": 3},
],
he: 1000
},
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) {
// alert(this.goods_list[index].num)
if (this.goods_list[index].num <= 0) {
this.del(index)
} else {
this.goods_list[index].num--
}
}
},
computed: {
total() {
sum = 0;
for (let i = 0; i < this.goods_list.length; i++) {
sum += Number(this.goods_list[i].num) * Number(this.goods_list[i].price)
}
return sum
}
}
})
</script>
</body>
</html>
作业2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
tr th{
text-align: center;
}
.row{
margin-top: 200px;
}
.x-search{
width:100px;
}
.x-yesterday{
background: rgba(104,255,255,0.5);
border-radius: 10px;
padding: 10px;
}
.x-5day{
background: rgba(104,104,255,0.5);
border-radius: 10px;
padding: 10px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div id="app">
<input type="text" v-model="city" class="form-control x-search" placeholder="请输入要查询的城市"><br>
<button @click="get_weather" class="text-center btn btn-info btn-block">获取天气</button>
<div>
</div><br>
<div class="x-yesterday">
<h2 class="text-center">昨日天气情况</h2>
<table class="table-hover table table-bordered table-striped">
<thead>
<tr>
<th>日期</th>
<th>风力</th>
<th>风向</th>
<th>最高温</th>
<th>最低温</th>
<th>天气状况</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{yesterday.date}}</td>
<td>{{yesterday.fl}}</td>
<td>{{yesterday.fx}}</td>
<td>{{yesterday.high}}</td>
<td>{{yesterday.low}}</td>
<td>{{yesterday.type}}</td>
</tr>
</tbody>
</table>
</div>
<br><br>
<div class="x-5day">
<h2 class="text-center">未来五天天气预报</h2>
<table class="table-hover table table-bordered table-striped">
<thead>
<tr>
<th>日期</th>
<th>风力</th>
<th>风向</th>
<th>高温</th>
<th>低温</th>
<th>天气状况</th>
</tr>
</thead>
<tbody>
<tr v-for="value in this.data.forecast">
<td>{{value.date}}</td>
<td>{{value.fengli}}</td>
<td>{{value.fengxiang}}</td>
<td>{{value.high}}</td>
<td>{{value.low}}</td>
<td>{{value.type}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
city: '',
data: '',
yesterday: '',
},
methods: {
get_weather() {
axios.get("http://wthrcdn.etouch.cn/weather_mini",
{params: {'city': this.city}})
.then(response => {
console.log(response.data.data)
let data = response.data.data
this.data = data
this.yesterday = data.yesterday
}).catch(error=>{
console.log(error)
console.log(error.response)
})
}
}
})
</script>
</body>
</html>
