在學習了vue框架之後，對前端又有了新的認知，vue框架的使用跟之前的js或者jquery有着很大的不同，在使用js或者jquery，我們首先想到的就是獲取頁面的節點，然後再來改變或者添加上自己想要的數據，vue則是相反，vue看重的是數據，通過獲取到的一些數據再來改變結構，所以在使用vue框架的時候，就要兩種思維切換。今天就來講下如何使用vue來對錶格的進行增刪改查。
1、對錶格數據的增加
先製作好一個靜態的表格
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.text{
width:600px ;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 3;
background: white;
}
.text div:nth-of-type(1){
line-height: 50px;
display: flex;
font-size: 30px;
margin: 20px auto;
justify-content: space-between;
width: 80%;
}
.text div{
margin: 30px 30px;
}
.text div:nth-of-type(5){
margin: 40px 30px;
height: 40px;
justify-content: space-between;
display: flex;
}
.text div:nth-of-type(5) button{
width: 70px;
color: #469FFF;
background: #ECF5FF;
border: 1px solid #469FFF;
}
.shadow{
/*display: none;*/
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: rgba(0,0,0,.4);
}
fieldset{
height: 330px;
width: 800px;
margin: 0 auto;
}
p{
margin: 0 auto;
width: 600px;
}
input{
height: 40px;
}
select{
height: 30px;
width: 50px;
}
fieldset p:nth-of-type(1){
margin-top: 40px;
}
fieldset p:nth-of-type(2){
margin: 30px auto;
}
.est{
margin-top: 20px;
margin-left: 130px;
width: 60px;
height: 40px;
background: #009A61;
color: white;
cursor: pointer;
}
table{
width: 804px;
margin: 0 auto;
border-collapse: collapse;
}
thead tr:nth-of-type(1){
text-align: center;
height: 40px;
color: white;
background: #009A61;
}
td{
border: 1px solid #D3D3D3;
}
#box tr{
height: 35px;
}
#box tr td:nth-of-type(4){
display: flex;
justify-content: center;
}
.mod{
width: 40px;
height: 30px;
background: #009A61;
border: none;
color: white;
}
.delet{
margin-left: 5px;
width: 40px;
height: 30px;
background: #009A61;
border: none;
color: white;
}
</style>
</head>
<body>
<section id="bbox">
<fieldset>
<legend>創建類目</legend>
<p>
<label>名字</label>
<input type="text" class="na" v-model="chat.name">
</p>
<p>
<label>年齡</label>
<input type="text" class="age" v-model="chat.age">
</p>
<p>
<label>性別</label>
<select class="gen" v-model="chat.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</p>
<button class="est" @click="change">創建</button>
</fieldset>
<table>
<thead>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
<td>刪除</td>
</tr>
</thead>
<tbody id="box">
<tr v-for="(item ,index) in char">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button class="mod" @click="show(index)">修改</button><button class="delet" @click="remove(index)">刪除</button></td>
</tr>
</tbody>
</table>
用v-for動態生成結構
<tbody id="box">
<tr v-for="(item ,index) in char">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button class="mod" @click="show(index)">修改</button><button class="delet" @click="remove(index)">刪除</button></td>
</tr>
</tbody>
new Vue({
el:"#bbox",
data:{
num:0,
char:[{
name:"張三",
age:"18",
sex:"男"}
],
另外在設一個新對象chat,當有新數據的時候就可以把數據放到chat,然後把chat添加到數據char中，在點擊按鈕時觸發事件，執行v-for這樣就能把數據添加上了。
change(){
if (this.chat.name&&this.chat.age&&this.chat.sex!=""){
this.char.push(this.chat);
this.chat = {name: '', age: "", sex: ''}
}
}
2、數據的刪除
數據刪除比較簡單只需要點擊刪除存儲在char中的數據就可以，關鍵是要知道刪除char中的第幾條數據，這樣就可以利用剛纔v-for中的index了。
remove(index){
this.char.splice(index,1)
},
3、數據的修改
數據的修改就是點擊修改的時候彈出一個框，這個時候就需要做一個子組件當做
<template id="shadow">
<div class="shadow">
<div class="text">
<div><p>修改</p><p style="text-align: right;font-size: 45px;cursor: pointer" id="turn_of" @click="hid">×</p></div>
<div>
<label>姓名</label>
<input type="text" style="width: 450px" id="modname" v-model="sname">
</div>
<div>
<label>年齡</label>
<input type="text" style="width: 450px" id="modage" v-model="sage">
</div>
<div>
<label>性別</label>
<select style="width: 250px" id="modgen" v-model="ssex">
<option >男</option>
<option>女</option>
</select>
</div>
<div><button id="sure" @click="send">確認</button><button id="cance" @click="hid">取消</button></div>
</div>
</div>
</template>
components:{
"show":{
template:"#shadow",
props:["sna","sag","ssx"],
data(){
return{
sname :this.sna,
sage:this.sag,
ssex:this.ssx
}
},
watch:{
sna:function(val){
this.sname = val
},
sag:function(val){
this.sage = val
},
ssx:function(val){
this.ssex = val
}
},
methods:{
hid(){
this.$emit("hhh")
},
send(){
let obj={
name:this.sname,
age:this.sage,
sex:this.ssex
};
this.$emit("sen",obj)
},
}
}
}
當打開修改窗時，裏面的數據要跟表格上的數據一致，這樣就可以在建一個新對象，把選中的那條數據放到新的對象中。
<show v-show="dis" @hhh="hide" @sen="newname" :sna="cht.name" :sag="cht.age" :ssx="cht.sex" ></show>
show(index){
this.dis =true;
num=index;
this.cht.name = this.char[index].name;
this.cht.age = this.char[index].age;
this.cht.sex = this.char[index].sex;
},
watch:{
sna:function(val){
this.sname = val
},
sag:function(val){
this.sage = val
},
ssx:function(val){
this.ssex = val
}
},
再通過$emit觸發自定義事件由子組件向父組件傳遞數據。
寫的有點亂，把整個完整的代碼獻上，給各位看官觀看，希望對各位有所幫助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.text{
width:600px ;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 3;
background: white;
}
.text div:nth-of-type(1){
line-height: 50px;
display: flex;
font-size: 30px;
margin: 20px auto;
justify-content: space-between;
width: 80%;
}
.text div{
margin: 30px 30px;
}
.text div:nth-of-type(5){
margin: 40px 30px;
height: 40px;
justify-content: space-between;
display: flex;
}
.text div:nth-of-type(5) button{
width: 70px;
color: #469FFF;
background: #ECF5FF;
border: 1px solid #469FFF;
}
.shadow{
/*display: none;*/
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: rgba(0,0,0,.4);
}
fieldset{
height: 330px;
width: 800px;
margin: 0 auto;
}
p{
margin: 0 auto;
width: 600px;
}
input{
height: 40px;
}
select{
height: 30px;
width: 50px;
}
fieldset p:nth-of-type(1){
margin-top: 40px;
}
fieldset p:nth-of-type(2){
margin: 30px auto;
}
.est{
margin-top: 20px;
margin-left: 130px;
width: 60px;
height: 40px;
background: #009A61;
color: white;
cursor: pointer;
}
table{
width: 804px;
margin: 0 auto;
border-collapse: collapse;
}
thead tr:nth-of-type(1){
text-align: center;
height: 40px;
color: white;
background: #009A61;
}
td{
border: 1px solid #D3D3D3;
}
#box tr{
height: 35px;
}
#box tr td:nth-of-type(4){
display: flex;
justify-content: center;
}
.mod{
width: 40px;
height: 30px;
background: #009A61;
border: none;
color: white;
}
.delet{
margin-left: 5px;
width: 40px;
height: 30px;
background: #009A61;
border: none;
color: white;
}
</style>
</head>
<body>
<section id="bbox">
<fieldset>
<legend>創建類目</legend>
<p>
<label>名字</label>
<input type="text" class="na" v-model="chat.name">
</p>
<p>
<label>年齡</label>
<input type="text" class="age" v-model="chat.age">
</p>
<p>
<label>性別</label>
<select class="gen" v-model="chat.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</p>
<button class="est" @click="change">創建</button>
</fieldset>
<table>
<thead>
<tr>
<td>姓名</td>
<td>年齡</td>
<td>性別</td>
<td>刪除</td>
</tr>
</thead>
<tbody id="box">
<tr v-for="(item ,index) in char">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td><button class="mod" @click="show(index)">修改</button><button class="delet" @click="remove(index)">刪除</button></td>
</tr>
</tbody>
</table>
<show v-show="dis" @hhh="hide" @sen="newname" :sna="cht.name" :sag="cht.age" :ssx="cht.sex" ></show>
</section>
<template id="shadow">
<div class="shadow">
<div class="text">
<div><p>修改</p><p style="text-align: right;font-size: 45px;cursor: pointer" id="turn_of" @click="hid">×</p></div>
<div>
<label>姓名</label>
<input type="text" style="width: 450px" id="modname" v-model="sname">
</div>
<div>
<label>年齡</label>
<input type="text" style="width: 450px" id="modage" v-model="sage">
</div>
<div>
<label>性別</label>
<select style="width: 250px" id="modgen" v-model="ssex">
<option >男</option>
<option>女</option>
</select>
</div>
<div><button id="sure" @click="send">確認</button><button id="cance" @click="hid">取消</button></div>
</div>
</div>
</template>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#bbox",
data:{
num:0,
char:[{
name:"張三",
age:"18",
sex:"男"}
],
chat:{
name:"",
age:"",
sex:""
},
cht:{
name:"",
age:"",
sex:""
},
dis:false
},
methods:{
change(){
if (this.chat.name&&this.chat.age&&this.chat.sex!=""){
this.char.push(this.chat);
this.chat = {name: '', age: "", sex: ''}
}
},
remove(index){
this.char.splice(index,1)
},
show(index){
this.dis =true;
num=index;
this.cht.name = this.char[index].name;
this.cht.age = this.char[index].age;
this.cht.sex = this.char[index].sex;
},
hide(){
this.dis=false;
},
newname(data){
this.dis=false;
this.char[num].name=data.name;
this.char[num].age = data.age;
this.char[num].sex = data.sex;
}
},
components:{
"show":{
template:"#shadow",
props:["sna","sag","ssx"],
data(){
return{
sname :this.sna,
sage:this.sag,
ssex:this.ssx
}
},
watch:{
sna:function(val){
this.sname = val
},
sag:function(val){
this.sage = val
},
ssx:function(val){
this.ssex = val
}
},
methods:{
hid(){
this.$emit("hhh")
},
send(){
let obj={
name:this.sname,
age:this.sage,
sex:this.ssex
};
this.$emit("sen",obj)
},
}
}
}
})
</script>
</body>
</html>