vue實(shí)現(xiàn)form表單與table表格的數(shù)據(jù)關(guān)聯(lián)功能示例
更新時(shí)間：2019年01月29日 10:12:40 作者：s_psycho
這篇文章主要介紹了vue實(shí)現(xiàn)form表單與table表格的數(shù)據(jù)關(guān)聯(lián)功能,涉及vue.js表單事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了vue實(shí)現(xiàn)form表單與table表格的數(shù)據(jù)關(guān)聯(lián)功能。分享給大家供大家參考，具體如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>www.fzitv.net vue form表單數(shù)據(jù)關(guān)聯(lián)</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
input{
margin-left: 50px ;
}
span{
margin-left: 50px ;
}
select{
margin-left: 50px ;
}
.create{
margin-left: 150px ;
}
</style>
</head>
<body>
<form id="app">
<fieldset>
<legend>Creat New Person</legend>
<span>Name:</span><input type="text" v-model="text0">
<br>
<span>Age:</span><input type="text" value="0" v-model="text1">
<br>
<span>Sex:</span><select v-model="text2">
<option>Man</option>
<option>Woman</option>
<option>....</option>
</select>
<br>
<button class="create" @click="add">Create</button>
</fieldset>
<table>
<tr><td>Name</td><td>Age</td><td>Sex</td><td>Delete</td></tr>
<tr v-for="x in person"><td>{{x.name}}</td><td>{{x.age}}</td><td>{{x.sex}}</td><td><button @click="fun">Delete</button></td></tr>
</table>
</form>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
text0:"",
text1:"",
text2:"",
person:[{
name:"Jack",
age:"20",
sex:"man",
},
{
name:"Bill",
age:"24",
sex:"woman",
},
]
},
methods: {
add(){
if (this.text0==""||this.text1==""){
alert("Name Or Age undefined")
}else{
this.person.push({
name: this.text0,
age: this.text1,
sex: this.text2,
});
}
},
fun(){
this.person.pop()
}
}
})
</script>
</html>
運(yùn)行效果如下圖所示：
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vsCode中vue文件無(wú)法提示html標(biāo)簽的操作方法
在vsCode中書(shū)寫(xiě)Vue頁(yè)面時(shí)無(wú)法提示,那真是很郁悶的事情,下面這篇文章主要給大家介紹了關(guān)于vsCode中vue文件無(wú)法提示html標(biāo)簽的操作方法,需要的朋友可以參考下2023-03-03
基于vue cli 通過(guò)命令行傳參實(shí)現(xiàn)多環(huán)境配置
這篇文章主要介紹了vue項(xiàng)目通過(guò)命令行傳參實(shí)現(xiàn)多環(huán)境配置(基于@vue/cli)的相關(guān)資料,需要的朋友可以參考下2018-07-07
Vue使用富文本編輯器Vue-Quill-Editor(含圖片自定義上傳服務(wù)、清除復(fù)制粘貼樣式等)
這篇文章主要介紹了Vue項(xiàng)目中使用富文本編輯器Vue-Quill-Editor(含圖片自定義上傳服務(wù)、清除復(fù)制粘貼樣式等)的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)圖書(shū)管理小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
在 Vue.js 中,組件之間的數(shù)據(jù)傳遞是一個(gè)常見(jiàn)的需求,Vue 提供了多種方法來(lái)實(shí)現(xiàn)這一目標(biāo),包括 props、全局事件總線、消息的訂閱與發(fā)布等,下面我們就來(lái)學(xué)習(xí)一下這些方法的具體實(shí)現(xiàn)吧2023-12-12
vue3實(shí)現(xiàn)tabs導(dǎo)航欄點(diǎn)擊每個(gè)導(dǎo)航項(xiàng)有下劃線動(dòng)畫(huà)效果
這篇文章主要介紹了vue3實(shí)現(xiàn)tabs導(dǎo)航欄點(diǎn)擊每個(gè)導(dǎo)航項(xiàng)有下劃線動(dòng)畫(huà)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
Vue中前后端使用WebSocket詳細(xì)代碼實(shí)例
websocket通信是很好玩的,也很有用的的通信方式,下面這篇文章主要給大家介紹了關(guān)于Vue中前后端使用WebSocket的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
vue mint-ui學(xué)習(xí)筆記之picker的使用
本篇文章主要介紹了vue mint-ui學(xué)習(xí)筆記之picker的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要給大家介紹了關(guān)于Vue數(shù)字相加、相減精度丟失處理3種方法的相關(guān)資料,前端在操作加減乘除計(jì)算時(shí),經(jīng)常會(huì)出現(xiàn)精度缺失問(wèn)題,有時(shí)會(huì)顯示為科學(xué)計(jì)數(shù)的樣式,需要的朋友可以參考下2023-08-08
使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無(wú)法勾選
這篇文章主要介紹了使用element組件table表格實(shí)現(xiàn)某條件下復(fù)選框無(wú)法勾選問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03