作业题目：
1.在作业1.html代码的基础上，引入vue.js文件，并实例化vm对象，绑定#goods元素
2.在作业1.html代码的基础上，默认中间弹出窗口隐藏起来，当用户点击"添加商品"，显示弹出窗口
3.在作业1.html代码的基础上，当用户点击弹出窗口的"保存"或者"取消"按钮时，隐藏弹出窗
4.在作业2.html代码的基础上，把以下数据全部通过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},
]
5.在作业2.html代码的基础上，实现数据隔行换色效果，奇数行背景为#aaaaff，偶数行背景为#ffaaaa
作业1：
<!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="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="goods">
<button @click="add_goods">添加商品</button>
<table>
<tr>
<th>商品id</th>
<th>商品标题</th>
<th>商品数量</th>
<th>商品价格</th>
<th>操作</th>
</tr>
<tr>
<td>12</td>
<!-- <td>python入门</td>-->
<td>python入门</td>
<td>
<button :disabled="disabled" @click="sub">-</button>
<input type="text" size="2" v-model="num">
<button @click="plus">+</button>
</td>
<td><input type="text" v-model="price"></td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td colspan="5">总计： {{total}}元</td>
</tr>
</table>
<div class="box" v-show="ok">
商品标题: <input type="text"><br><br>
商品数量: <input type="text"><br><br>
商品价格: <input type="text"><br><br>
<button @click="hidden">保存</button>
<button @click="hidden">取消</button>
</div>
</div>
<script>
let vm = new Vue({
el: '#goods',
data: {
ok: false,
total: 0,
price: 0,
disabled: true,
num: 0,
},
methods: {
add_goods(){
this.ok = true
},
hidden(){
this.ok = false
},
plus(){
this.num++ ;
this.total = this.price*this.num;
this.disabled = false
},
sub(){
if (this.num-- <= 1){
this.disabled = true;
this.total = this.price*this.num;
} else {
this.total = this.price*this.num;
}
}
}
})
</script>
</body>
</html>
作业2：
<!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;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="goods">
<table>
<tr>
<th>商品标题</th>
<th>商品数量</th>
<th>商品价格</th>
</tr>
<tr v-for="item,index in goods_list" :bgcolor="index%2!=0?bg_single.color:bg_double.color">
<td>{{item.name}}</td>
<td>{{item.num}}</td>
<td>{{item.price}}</td>
</tr>
</table>
</div>
<script>
let 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},
],
bg_single: {
'color': '#ffaaaa',
},
bg_double: {
'color': '#aaaaff',
},
}
})
</script>
</body>
</html>
