6月18号
1. 在作业的代码基础上，完成商品数量的加减，注意商品数量如果低于0个，则自动删除当前商品
2. 在作业的代码基础仧，完成购物车总价格的计算。
3. 使用ajax获取北京天气，并把昨天和未来5天天气情况以表格格式展示到html页面中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
#goods{
margin-top: 50px;
margin-left: 20%;
}
#goods table{
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;
280px;
height: 160px;
padding: 40px 80px;
}
.show_hide{
display: none;
}
.odd_bgcolor{
background-color: blue;
}
.even_bgcolor{
background-color: orange;
}
</style>
</head>
<body>
<div id="goods">
<button @click="change">添加商品</button>
<table>
<thead>
<th>商品id</th>
<th>商品标题</th>
<th>商品数量</th>
<th>商品价格</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="(goods, index) in goods_list" :class="index % 2 == 0 ? 'even_bgcolor' : 'odd_bgcolor'">
<td>{{index}}</td>
<td>{{goods.name}}</td>
<td>
<button @click="sub(index)">-</button>
<input type="text" size="2" v-model="goods.num">
<button @click="add_(index)">+</button>
</td>
<td>{{goods.price.toFixed(2)}}</td>
<td>
<button @click="edit(index)">编辑</button>
<button @click="del(index)">删除</button>
</td>
</tr>
<tr>
<td colspan="5">总计：{{total}}元</td>
</tr>
</tbody>
</table>
<div class="box" :class="mycls">
商品标题: <input type="text" v-model="goods_info.title"><br><br>
商品数量: <input type="text" v-model="goods_info.num"><br><br>
商品价格: <input type="text" v-model="goods_info.price"><br><br>
<button @click="add()">保存</button>
<button @click="cancle">取消</button>
</div>
</div>
</body>
<script>
vm = new Vue({
el: '#goods',
data:{
mycls:{
show_hide: true,
},
goods_info:{
id: -1,
title: '',
num: '',
price: '',
},
goods_list:[
{"name":"python入门","num":27,"price":150},
{"name":"python进阶","num":27,"price":100},
{"name":"python高级","num":27,"price":75},
{"name":"python研究","num":27,"price":60},
{"name":"python放弃","num":27,"price":110},
],
},
methods:{
change(){
if (this.mycls.show_hide){
this.mycls.show_hide = false
}
},
add(){
if (this.goods_info.title === '' || this.goods_info.num === '' || this.goods_info.price === ''
|| isNaN(parseFloat(this.goods_info.price)) || isNaN(parseInt(this.goods_info.num))
|| parseFloat(this.goods_info.price) < 0 || parseInt(this.goods_info.num) < 0){
return alert('请正确填写')
}
let name = this.goods_info.title;
let num = parseInt(this.goods_info.num);
let price = parseFloat(this.goods_info.price);
if (this.goods_info.id !== -1){
obj = this.goods_list[this.goods_info.id];
obj.name = name;
obj.num = num;
obj.price = price;
}else{
obj = {
'name': name,
'num': num,
'price': price,
};
this.goods_list.push(obj);
}
this.cancle()
},
del(index){
this.goods_list.splice(index, 1)
},
cancle(){
this.mycls.show_hide = true;
this.goods_info.id = -1;
this.goods_info.title = '';
this.goods_info.num = '';
this.goods_info.price = '';
},
edit(index){
this.mycls.show_hide = false;
res = this.goods_list[index];
this.goods_info.title = res.name;
this.goods_info.num = res.num;
this.goods_info.price = res.price;
this.goods_info.id = index;
},
sub(index){
if( this.goods_list[index].num <= 0 ){
this.del(index)
}else{
this.goods_list[index].num--;
}
},
add_(index){
this.goods_list[index].num++;
},
},
computed:{
total:function () {
let tmp = 0;
for (let obj of this.goods_list){
tmp = tmp + obj.num * obj.price;
}
return tmp.toFixed(2)
}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="vue.js"></script>
<script src="axios.js"></script>
</head>
<body>
<div class="container" style="margin-top: 30px">
<div id="app">
<input type="text" v-model="city" placeholder="输入城市名称获取天气情报">
<button @click="getweather">获取天气</button>
<h3>温度: {{data.wendu}}</h3>
<h3>{{data.ganmao}}</h3>
<h3>昨日天气</h3>
<table class="table table-striped table-bordered">
<thead>
<th>日期</th>
<th>风力</th>
<th>风向</th>
<th>温度(高)</th>
<th>温度(低)</th>
<th>天气</th>
</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>
<tr></tr>
</tbody>
</table>
<h3>未来五天天气</h3>
<table class="table table-striped table-bordered">
<thead>
<th>日期</th>
<th>风力</th>
<th>风向</th>
<th>温度(高)</th>
<th>温度(低)</th>
<th>天气</th>
</thead>
<tbody>
<tr v-for="obj in this.data.forecast">
<td>{{obj.date}}</td>
<td>{{obj.fengli}}</td>
<td>{{obj.fengxiang}}</td>
<td>{{obj.high}}</td>
<td>{{obj.low}}</td>
<td>{{obj.type}}</td>
</tr>
<tr></tr>
</tbody>
</table>
</div>
</div>
<script>
vm = new Vue({
el: '#app',
data: {
city: '',
data: '',
yesterday: '',
},
methods: {
getweather(){
axios.get("http://wthrcdn.etouch.cn/weather_mini",{
params: {
'city': this.city,
},
}).then(response=>{
let data = response.data.data;
this.data = data;
this.yesterday = data.yesterday;
}).catch(error=>{
console.log(error.response)
});
}
}
})
</script>
</body>
</html>
6月17号
1. 完成todolist的案例，在todolist中实现隔行换色效果
奇数行的计划， 背景色为"blue"
偶数行的计划，背景色为"orange"
2. 使用vue.js完成表格的管理功能[添加数据，取消添加、展示商品列表，编辑商品信息，取消编辑，删除商品]
商品id默认使用下标作为值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
#goods{
margin-top: 50px;
margin-left: 20%;
}
#goods table{
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;
280px;
height: 160px;
padding: 40px 80px;
}
.show_hide{
display: none;
}
.odd_bgcolor{
background-color: blue;
}
.even_bgcolor{
background-color: orange;
}
</style>
</head>
<body>
<div id="goods">
<button @click="change">添加商品</button>
<table>
<thead>
<th>商品id</th>
<th>商品标题</th>
<th>商品数量</th>
<th>商品价格</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="(goods, index) in goods_list" :class="index % 2 == 0 ? 'even_bgcolor' : 'odd_bgcolor'">
<td>{{index}}</td>
<td>{{goods.name}}</td>
<td>{{goods.num}}</td>
<td>{{goods.price}}</td>
<td>
<button @click="edit(index)">编辑</button>
<button @click="del(index)">删除</button>
</td>
</tr>
</tbody>
</table>
<div class="box" :class="mycls">
商品标题: <input type="text" v-model="goods_info.title"><br><br>
商品数量: <input type="text" v-model="goods_info.num"><br><br>
商品价格: <input type="text" v-model="goods_info.price"><br><br>
<button @click="add()">保存</button>
<button @click="cancle">取消</button>
</div>
</div>
</body>
<script>
vm = new Vue({
el: '#goods',
data:{
mycls:{
show_hide: true,
},
goods_info:{
id: -1,
title: '',
num: '',
price: '',
},
goods_list:[
{"name":"python入门","num":27,"price":150},
{"name":"python进阶","num":27,"price":100},
{"name":"python高级","num":27,"price":75},
{"name":"python研究","num":27,"price":60},
{"name":"python放弃","num":27,"price":110},
],
},
methods:{
change(){
if (this.mycls.show_hide){
this.mycls.show_hide = false
}
},
add(){
if (this.goods_info.title === '' || this.goods_info.num === '' || this.goods_info.price === ''
|| isNaN(parseFloat(this.goods_info.price)) || isNaN(parseInt(this.goods_info.num))
|| parseFloat(this.goods_info.price) < 0 || parseInt(this.goods_info.num) < 0){
return alert('请正确填写')
}
let name = this.goods_info.title;
let num = parseInt(this.goods_info.num);
let price = parseFloat(this.goods_info.price);
if (this.goods_info.id !== -1){
obj = this.goods_list[this.goods_info.id];
obj.name = name;
obj.num = num;
obj.price = price;
this.goods_info.id = -1
}else{
obj = {
'name': name,
'num': num,
'price': price,
};
this.goods_list.push(obj);
}
this.mycls.show_hide = true;
this.goods_info.title = '';
this.goods_info.num = '';
this.goods_info.price = '';
},
del(index){
this.goods_list.splice(index, 1)
},
cancle(){
this.mycls.show_hide = true;
this.goods_info.id = -1;
this.goods_info.title = '';
this.goods_info.num = '';
this.goods_info.price = '';
},
edit(index){
this.mycls.show_hide = false;
res = this.goods_list[index];
this.goods_info.title = res.name;
this.goods_info.num = res.num;
this.goods_info.price = res.price;
this.goods_info.id = index;
},
}
})
</script>
</html>
6月16号
1. 在作业代码的基础上，引入vue.js文件，并实例化vm对象，绑定#goods元素
2. 在作业代码的基础上，默认中间弹出窗口隐藏起来，当用户点击"添加商品"，显示弹出窗口
3. 在作业代码的基础上，当用户点击弹出窗口的"保存"或者"取消"按钮时，隐藏弹出窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
#goods table{
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;
280px;
height: 160px;
padding: 40px 80px;
}
.show_hide{
display: none;
}
</style>
</head>
<body>
<div id="goods">
<button @click="change">添加商品</button>
<table>
<tr>
<th>商品id</th>
<th>商品标题</th>
<th>商品数量</th>
<th>商品价格</th>
<th>操作</th>
</tr>
<tr>
<td>12</td>
<td>python入门</td>
<td>
<button :disabled="goods.disabled" @click="sub">-</button>
<input type="text" size="2" v-model="goods.num">
<button @click="add">+</button>
</td>
<td>15.5</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td colspan="5">总计： {{goods.num * goods.price}}元</td>
</tr>
</table>
<div class="box" :class="mycls">
商品标题: <input type="text"><br><br>
商品数量: <input type="text"><br><br>
商品价格: <input type="text"><br><br>
<button @click="mycls.show_hide=!mycls.show_hide">保存</button>
<button @click="mycls.show_hide=!mycls.show_hide">取消</button>
</div>
</div>
</body>
<script>
vm = new Vue({
el: '#goods',
data:{
mycls:{
show_hide: true,
},
goods:{
num: 0,
price: 15.5,
disabled: false,
}
},
methods:{
change(){
if (this.mycls.show_hide){
this.mycls.show_hide = false
}
},
sub(){
if( this.goods.num <= 0 ){
this.goods.num=0;
this.goods.disabled=true;
}else{
this.goods.num--;
this.goods.disabled=false;
}
},
add(){
this.goods.num++;
this.goods.disabled = false;
}
}
})
</script>
</html>
1.在作业代码的基础上，把以下数据全部通过vue显示到页面中。
goods_list:[
{"name":"python入门","num":27,"price":150},
{"name":"python进阶","num":27,"price":100},
{"name":"python高级","num":27,"price":75},
{"name":"python研究","num":27,"price":60},
{"name":"python放弃","num":27,"price":110},
]
2在作业代码的基础上，实现数据隔行换色效果，奇数行背景为#aaaaff，偶数行背景为#ffaaaa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
#goods table{
600px;
border:1px solid #000;
border-collapse: collapse;
}
#goods td,#goods th{
border: 1px solid #000;
}
.odd_bgcolor{
background-color: #aaaaff;
}
.even_bgcolor{
background-color: #ffaaaa;
}
</style>
</head>
<body>
<div id="goods">
<table>
<thead>
<th>商品标题</th>
<th>商品数量</th>
<th>商品价格</th>
</thead>
<tbody>
<tr v-for="(goods, index) in goods_list" :class="index % 2 == 0 ? 'even_bgcolor' : 'odd_bgcolor'">
<td>{{goods.name}}</td>
<td>{{goods.num}}</td>
<td>{{goods.price}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
vm = new Vue({
el: '#goods',
data:{
goods_list:[
{"name":"python入门","num":27,"price":150},
{"name":"python进阶","num":27,"price":100},
{"name":"python高级","num":27,"price":75},
{"name":"python研究","num":27,"price":60},
{"name":"python放弃","num":27,"price":110},
],
},
methods:{
}
})
</script>
</html>