作业一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.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;
}
</style>
</head>
<body>
<div id="goods">
<button @click="num=1">添加商品</button>
<table>
<tr>
<th>商品id</th>
<th>商品标题</th>
<th>商品数量</th>
<th>商品价格</th>
<th>操作</th>
</tr>
<tr>
<td>12</td>
<td>python入门</td>
<td>
<button>-</button>
<input type="text" size="2">
<button>+</button>
</td>
<td>15.5</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
<tr>
<td colspan="5">总计： 1000元</td>
</tr>
</table>
<div class="box" v-if="num==1" >
商品标题: <input type="text"><br><br>
商品数量: <input type="text"><br><br>
商品价格: <input type="text"><br><br>
<button @click="num=0">保存</button>
<button @click="num=0">取消</button>
</div>
</div>
<script>
let vm = new Vue({
el:'#goods',
data:{
disabled:false,
num:0
},
})
</script>
</body>
</html>
作业二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.min.js"></script>
<style>
#goods table {
600px;
border: 1px solid #000;
border-collapse: collapse;
}
#goods td, #goods th {
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="goods">
<table>
<tr>
<th>商品标题</th>
<th>商品数量</th>
<th>商品价格</th>
</tr>
<tr :bgcolor="index%2==0?'#ffaaaa':'#aaaaff'" v-for="obj,index in goods_list">
<td>{{obj.name}}</td>
<td>{{obj.num}}</td>
<td>{{obj.price}}</td>
<td>{{index}}</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},
],
}
})
</script>
</body>
</html>