1. 完成todolist的案例，在todolist中实现隔行换色效果
奇数行的计划， 背景色为"blue"
偶数行的计划，背景色为"orange"
2. 使用vue.js完成表格的管理功能[添加数据，取消添加、展示商品列表，编辑商品信息，取消编辑，删除商品]
商品id默认使用下标作为值
提示： v-for显示商品列表，商品列表作为数组保存vm对象的data属性里面
添加商品和删除商品就是对数组的添加成员和删除指定下标成员
todolist
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todolisttitle>
<script src="../day04/vue.js">script>
<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>
head>
<body>
<div id="todolist" class="list_con">
<h2>To do listh2>
<input type="text" v-model="message" class="inputtxt">
<input type="button" @click="addItem" value="增加" class="inputbtn">
<ul id="list" class="list">
<li :bgcolor="key%2==0?'blue':'orange'" v-for="(item,key) in dolist" >
<span >{{item}}span>
<a @click="upItem(key)" class="up"> ↑ a>
<a @click="downItem(key)" class="down"> ↓ a>
<a @click="delItem(key)" class="del">删除a>
li>
ul>
div>
<script>
var vm = new Vue({
el:"#todolist",
data:{
message:"",
dolist:[
"1",
"2",
"3",
],
},
methods:{
addItem(){
if(this.message==""){
return false
}
this.dolist.push(this.message);
this.message=""
},
delItem(key){
this.dolist.splice(key,1);
},
upItem(key){
if(key==0){
return false
}
var result = this.dolist.splice(key,1);
this.dolist.splice(key-1,0,result[0])
},
downItem(key){
var result = this.dolist.splice(key,1);
this.dolist.splice(key+1,0,result[0])
}
}
})
script>
body>
html>
作业2
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="../day04/vue.js">script>
<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;
}
#goods
.box_display{
display:none
}
style>
head>
<body>
<div id="goods">
<button @click="show_box">添加商品button>
<table>
<tr>
<th>商品idth>
<th>商品标题th>
<th>商品数量th>
<th>商品价格th>
<th>操作th>
tr>
<tr v-for="item,index in item_list">
<td>{{index}}td>
<td>{{item.name}}td>
<td>
<button @click="sub">-button>
<input type="text" size="2" v-model="item.amount">
<button @click="++item.amount">+button>
td>
<td>{{item.price}}td>
<td>
<button @click="show_box">编辑button>
<button @click="delItem">删除button>
td>
tr>
<tr>
<td colspan="5" >总计： {{sum}}元td>
tr>
table>
<div :class="box_css">
商品标题: <input type="text" v-model="name" id="name"><br><br>
商品数量: <input type="text" v-model="amount" id="amount"><br><br>
商品价格: <input type="text" v-model="price" id="price"><br><br>
<button @click="addItem">保存button>
<button @click="editItem">bjbutton>
<button @click="hide_box">取消button>
div>
div>
<script>
var vm = new Vue({
el:"#goods",
data:{
box_css:{
box_display:true,
box:false
},
item_list:[
item_data={
id:1,
name:'iphone11',
amount:1,
price:4399,
}
],
id:'',
name:"",
amount:"",
price:"",
sum:0
},
methods: {
show_box() {
this.box_css = {
box_display: false,
box: true
}
},
hide_box() {
this.box_css = {
box_display: true,
box: false
}
},
sub(){
if(this.amount<=1){
this.amount=0;
}else{
this.amount--;
}
},
addItem(index){
// if(this.name && this.amount && this.price){
// return false
// }
var item_data = {
id:index,
name: this.name,
amount: this.amount,
price: this.price,
};
this.item_list.push(item_data);
this.name='';
this.amount='';
this.price='';
},
delItem(index){
this.item_list.splice(index,1)
},
editItem(index){
item_data={
id:this.index,
name:this.name,
amount:this.amount,
price:this.price,
};
this.item_list.splice(item_data.id,1,item_data);
this.name='';
this.amount='';
this.price='';
},
}
})
script>
body>
html>