作业题目：
1.完成todolist的案例，在todolist中实现隔行换色效果
奇数行的计划， 背景色为"blue"
偶数行的计划，背景色为"orange"
2.使用vue.js完成表格的管理功能[添加数据，取消添加、展示商品列表，编辑商品信息，取消编辑，删除商品]
商品id默认使用下标作为值
提示： v-for显示商品列表，商品列表作为数组保存vm对象的data属性里面，添加商品和删除商品就是对数组的添加成员和删除指定下标成员
作业1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolist</title>
<style type="text/css">
.list_con {
width: 600px;
margin: 50px auto 0;
}
.inputtxt {
width: 550px;
height: 30px;
border: 1px solid #ccc;
padding: 0px;
text-indent: 10px;
}
.inputbtn {
width: 40px;
height: 32px;
padding: 0px;
border: 1px solid #ccc;
}
.list {
margin: 0;
padding: 0;
list-style: none;
margin-top: 20px;
}
.list li {
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
.list li span {
float: left;
}
.list li a {
float: right;
text-decoration: none;
margin: 0 10px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
</head>
<body>
<div id="todolist" class="list_con">
<h2>To do list</h2>
<input type="text" v-model="content" id="txt1" class="inputtxt">
<input type="button" @click="addItem" value="增加" class="inputbtn">
<ul id="list" class="list">
<li :style="index%2==0? single:double" v-for="item,index in todolist">
<span>{{item}}</span>
<a @click="upItem(index)" class="up"> ↑ </a>
<a @click="downItem(index)" class="down"> ↓ </a>
<a @click="delItem(index)" class="del">删除</a>
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: "#todolist",
data: {
content: '',
todolist: ["吃饭", "睡觉", "打豆豆"],
single: {
backgroundColor:'red'
},
double: {
backgroundColor:'orange'
}
},
methods: {
addItem() { // 添加
this.todolist.push(this.content);
},
delItem(index) { // 删除
this.todolist.splice(index, 1);
},
upItem(index) { //上移
let current = this.todolist.splice(index, 1)[0];
this.todolist.splice(index - 1, 0, current);
},
downItem(index) { //下移
let current = this.todolist.splice(index, 1)[0];
this.todolist.splice(index + 1, 0, current);
}
}
});
</script>
</body>
</html>
作业2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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">
<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;
}
</style>
</head>
<body>
<div id="goods">
<button @click="append" class="btn btn-success">添加商品</button>
<table>
<tr>
<th>商品id</th>
<th>商品标题</th>
<th>商品数量</th>
<th>商品价格</th>
<th>操作</th>
</tr>
<tr v-for="item,index in book_list">
<td>{{ index+1 }}</td>
<td>{{ item.name}}</td>
<td>
<button :disabled="disabled" @click="down(index)">-</button>
<input type="text" v-model="item.num">
<button @click="up(index)">+</button>
</td>
<td>{{ item.price}}</td>
<td>
<button class="btn btn-primary btn-sm">编辑</button>
<button @click="del(index)" class="btn btn-warning btn-sm">删除</button>
</td>
</tr>
<tr>
<td colspan="5">总计： 1000元</td>
</tr>
</table>
<div class="box" v-show="is_show">
<input type="text" v-model="dic.name" class="form-control" placeholder="商品名称"><br>
<input type="text" v-model="dic.num" class="form-control" placeholder="商品数量"><br>
<input type="text" v-model="dic.price" class="form-control" placeholder="商品价格"><br>
<button @click="addItem" class="btn btn-info">保存</button>
<button @click="change" class="btn btn-danger">取消</button>
</div>
</div>
<script>
let vm = new Vue({
el: '#goods',
data: {
is_show: false,
disabled: false,
dic: {"name": "", "num": "", "price": ""},
book_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},],
},
methods: {
append() {
if (this.is_show == false) {
this.is_show = true
}
},
change() {
this.is_show = false
},
up(index) {
this.book_list[index].num++;
this.disabled = false;
},
down(index) {
if (this.book_list[index].num-- < 1) {
this.book_list[index].num = 0;
this.disabled = true;
}
},
addItem() {
this.book_list.push({"name": this.dic.name, "num": this.dic.num, "price": this.dic.price})
},
del(index) {
this.book_list.splice(index, 1)
},
compile(index) {
}
}
});
</script>
</body>
</html>
