作业37
第一题 todolist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<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="vue.js"></script>
</head>
<body>
<div class="list_con" id="app">
<h2>To do list</h2>
<input type="text" name="" id="txt1" class="inputtxt" v-model="content">
<input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="add">
<ul id="list" class="list">
<!-- javascript:; # 阻止a标签跳转 -->
<li v-for="info,index in infolist">
<span>{{info}}</span>
<a href="javascript:;" class="up" @click="up(index)"> ↑ </a>
<a href="javascript:;" class="down" @click="down(index)"> ↓ </a>
<a href="javascript:;" class="del" @click="dele(index)">删除</a>
</li>
</ul>
</div>
<script>
let vm=new Vue({
el:'#app',
data:{
content:'',
infolist:["学习html","学习css","学习javascript","学习语文"],
},
methods:{
add(){
this.infolist.push(this.content);
this.content='';
},
up(index){
if (index!==0){
let tmp = this.infolist.splice(index,1)[0];
this.infolist.splice(index-1,0,tmp);
}
},
down(index){
if (index!==this.infolist.length-1) {
let tmp = this.infolist.splice(index,1)[0];
this.infolist.splice(index+1,0,tmp);
}
},
dele(index){
this.infolist.splice(index)
}
}
})
</script>
</body>
</html>
第二题 使用vue.js完成表格的管理功能
// 使用vue.js完成表格的管理功能
// [添加数据，取消添加、展示商品列表，编辑商品信息，取消编辑，删除商品]
// 商品id默认使用下标作为值
//
// 提示： v-for显示商品列表，商品列表作为数组保存vm对象的data属性里面
// 添加商品和删除商品就是对数组的添加成员和删除指定下标成员
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<style>
#addgood,#editgood {
height: 300px;
width: 300px;
z-index: 99;
position: fixed;
left: 35%;
top: 35%;
}
#goodlist {
z-index: 0;
}
</style>
</head>
<body>
<!--// 使用vue.js完成表格的管理功能-->
<!--// [添加数据，取消添加、展示商品列表，编辑商品信息，取消编辑，删除商品]-->
<!--// 商品id默认使用下标作为值-->
<!--//-->
<!--// 提示： v-for显示商品列表，商品列表作为数组保存vm对象的data属性里面-->
<!--// 添加商品和删除商品就是对数组的添加成员和删除指定下标成员-->
<div id="app">
<button @click="addshow=true">添加商品</button>
<button @click="goodsshow=true">显示商品</button>
<div id="goodlist" v-show="goodsshow">
<table class="table table-hover table-stripped">
<thead>
<tr>
<th>商品id</th>
<th>商品标题</th>
<th>商品数量</th>
<th>商品价格</th>
<th>操作</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="book,index in goodslist">
<td>{{book.id}}</td>
<td>{{book.title}}</td>
<td>{{book.mount}}</td>
<td>{{book.price}}</td>
<td><button @click="edit(index)">编辑</button></td>
<td><button @click="dele(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
<!-- 添加商品面板-->
<div id="addgood">
<div class="panel panel-default" v-show="addshow">
<div class="panel-heading">
<h3>添加商品</h3>
</div>
<div class="panel-body">
<p>商品id：<input type="text" v-model="tmp_obj.id"></p>
<p>商品标题：<input type="text" v-model="tmp_obj.title"></p>
<p>商品数量：<input type="text" v-model="tmp_obj.mount"></p>
<p>商品价格：<input type="text" v-model="tmp_obj.price"></p>
<button @click="add">保存</button>
<button @click="addshow=false">取消</button>
</div>
</div>
</div>
<!-- 编辑商品面板-->
<div id="editgood" v-if="editshow">
<div class="panel panel-default">
<div class="panel-heading">
<h3>编辑商品</h3>
</div>
<div class="panel-body">
<p>商品标题：<input type="text" v-model="tmp_obj2.title"></p>
<p>商品数量：<input type="text" v-model="tmp_obj2.mount"></p>
<p>商品价格：<input type="text" v-model="tmp_obj2.price"></p>
<button @click="save">保存</button>
<button @click="editshow=false">取消</button>
</div>
</div>
</div>
</div>
<script>
let vm=new Vue({
el:'#app',
data:{
tmp_obj:{},
tmp_obj2:{},
tmp_index:null,
addshow:false,
editshow:false,
goodsshow:false,
goodslist:[
{'id':1,'title':'python入门','price':200,'mount':50},
{'id':2,'title':'python进阶','price':555,'mount':50},
{'id':3,'title':'python跑路','price':999,'mount':50},
]
},
methods:{
add(){
this.goodslist.push(this.tmp_obj);
this.tmp_obj={}
this.addshow=false;
},
edit(index){
this.editshow=true;
// 直接写this.tmp_obj2=this.goodslist[index]是浅拷贝，可变数据类型 原数据会跟着改变
this.tmp_obj2=JSON.parse(JSON.stringify(this.goodslist[index]))
// this.tmp_obj2.title=this.goodslist[index].title;
// this.tmp_obj2.id=this.goodslist[index].id;
// this.tmp_obj2.price=this.goodslist[index].price;
// this.tmp_obj2.mount=this.goodslist[index].mount;
this.tmp_index=index
},
save(){
this.goodslist.splice(this.tmp_index,1,this.tmp_obj2);
this.tmp_obj2={};
this.editshow=false;
},
dele(index){
this.goodslist.splice(index,1)
}
}
})
</script>
</body>
</html>
posted on
