<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/element-ui/2.5.3/theme-chalk/index.css"/>
<style type="text/css">
*{margin: 0;
padding: 0;
list-style: none;
}
.zhuti{
width: 400px;
height: 300px;
margin: 0 auto;
border: 1px solid #BCBCBC;
margin-top: 100px;
}
.mingzi{float: left;
margin-top: 80px;
margin-left: 40px;}
.nianling{float: left;
margin-top: 10px;
margin-left: 40px}
.xingbie{float: left;
margin-top: 40px;
margin-left: -200px}
#chuangjian{float: left;
width: 50px;
height: 40px;
margin-top: 70px;
margin-left: -165px;
background: #42B983;}
.biaoti{position: relative;
width: 400px;
height: 50px;
background: #42B983;
margin: 0 auto;}
.biaoti ul{
float: left;
}
.biaoti li{
width: 98px;
line-height: 50px;
text-align: center;
border: 1px solid black;
float:left;
height: 50px;
}
.nierong {
width: 400px;
margin: 0 auto;
}
.nierong ul{
height: 50px;
}
.nierong li{
width: 98px;
float: left;
height: 50px;
line-height: 50px;
border: 1px solid;
text-align: center;
}
.yinying{position:fixed;
top: 0px;
width: 100%;
height: 100%;
background-color:rgba(0,0,0,0.5);
}
.fucheng{position: absolute;
top: 50%;
left: 50%;
margin-top: -201px;
margin-left: -201px;
width: 200px;
height: 200px;
border: 1px solid black;
background: white;
padding: 100px;}
.ming2{margin-top: 20px;}
.ming2 input {
width: 130px;
height: 20px;}
.nian2{margin-top: 20px;}
.nian2 input{width: 130px;
height: 20px;}
.xing2{margin-top: 20px;}
</style>
<body>
<div id="div">
<div class="zhuti">
<div class="mingzi"><span>名字:</span><input v-model="id" id="mingzi" type="" name="" id="" value="" />
</div>
<div class="nianling"><spam>年齡:</spam><input v-model="age" id="nianling" type="" name="" id="" value="" />
</div>
<div class="xingbie"> <span>性別:</span> <select v-model="sex" id="sel">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<button @click="chen" id="chuangjian">創建</button>
</div>
<div class="biaoti">
<ul>
<li>名字</li>
<li>年齡</li>
<li>性別</li>
<li >
刪除：更改
</li>
</ul>
</div>
<div style="clear: both;"></div>
<div class="nierong" id="w1">
<ul v-for="( item , index) in list">
<li>{{item.id}}</li>
<li>{{item.age}}</li>
<li>{{item.sex}}</li>
<li>
<input type="button" @click="chen1(item.id)"class="a1" id="" value="刪除" />
這裏是插件的引用
<el-button type="text" @click="chen2(index)">更改</el-button>
<el-dialog
title="更改"
:visible.sync="centerDialogVisible"
width="30%"
center >
<!--<div v-for="( item , index) in liste" >-->
<span>名字</span><input v-model="id1" type="" name="" id="" value="" />
<span>年齡</span><input v-model="age1" type="" name="" id="" value="" />
<br /> <span>性別</span> <select v-model="sex1" id="sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="chen3">確 定</el-button>
</span>
<!--</div>-->
</el-dialog>
</li>
</ul>
</div>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/element-ui/2.5.3/index.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app= new Vue({
el:"#div",
data:{
id:'',
age:'',
sex:'',
id1:"",
age1:'',
sex1:'',
ind:'',
list:[
{id:"小紅",age:23,sex:"女"},
{id:"小李",age:25,sex:"男"},
{id:"小軍",age:25,sex:"男"},
],
centerDialogVisible: false,
},
methods:{
chen () {
//
var car={id:this.id, age:this.age, sex:this.sex }
this.list.push(car);
this.id="",
this.age="",
this.sex=""
},
chen1 (id) {
this.list.some((item,i)=>{
if(item.id==id){
this.list.splice(i,1)
return true
}
})
},
chen2 (id){
console.log(id)
this.id1=this.list[id].id;
this.age1=this.list[id].age;
this.sex1=this.list[id].sex;
this.ind=id;
this. centerDialogVisible=!this. centerDialogVisible;
},
chen3 (){
console.log(this.ind)
this.list[this.ind].id=this.id1;
this.list[this.ind].age=this.age1;
this.list[this.ind].sex=this.sex1;
this. centerDialogVisible=!this. centerDialogVisible
},
}
})
</script>
</html>
用VUE 實現 名單的增減改刪
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章