vue中v-model動態(tài)生成的實例詳解
更新時間：2017年10月27日 11:02:47 作者：湖工電氣
這篇文章主要介紹了vue中v-model動態(tài)生成的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下
vue中v-model動態(tài)生成的實例詳解
前言：
最近在做公司的項目中，有這么一個需求，每一行有一個input和一個select,其中行數(shù)是根據(jù)服務(wù)器返回的json數(shù)據(jù)動態(tài)變化的。那么問題來了，我們要怎樣動態(tài)生成v-model？
現(xiàn)在項目做完了就整理了一下，直接貼代碼了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<div class="line" v-for="(item,index) in dataModel">
<input type="text" v-model="dataModel[index].value1" />
<span>{{dataModel[index].value1}}</span>
<button v-bind:data-index="index" v-on:click="submitClick">提交</button>
<input type="text" v-model="dataModel[index].value2" />
<span>{{dataModel[index].value2}}</span>
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
// 創(chuàng)建一個空的數(shù)組
dataModel: []
},
created: function(){
// 這里是動態(tài)生成v-model,這個可以放在網(wǎng)絡(luò)請求成功里面;
var len = 4;
for (var i = 0; i < len; i ++) {
var item = {value1: '',value2: ''};
this.dataModel.push(item);
}
},
methods: {
// 顯示v-model里面的數(shù)據(jù)
submitClick: function(event){
var tag = event.target;
var index = tag.getAttribute('data-index');
alert(this.dataModel[index].value1);
}
}
})
</script>
</html>
效果圖：
如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
使用Vue和Firebase實現(xiàn)后臺數(shù)據(jù)存儲的示例代碼
在現(xiàn)代 web 應(yīng)用開發(fā)中,前端和后端的無縫協(xié)作至關(guān)重要,借助 Firebase 等云計算解決方案,前端開發(fā)者可以輕松實現(xiàn)數(shù)據(jù)存儲與實時更新,本文將為大家詳細介紹如何利用 Vue 3 的 Composition API 和 Firebase 實現(xiàn)后臺數(shù)據(jù)存儲,需要的朋友可以參考下2024-10-10
Vue-loader其實就是一個webpack的loader，用來把vue組件轉(zhuǎn)換成可部署的js, html, css模塊，這篇文章主要介紹了Vue-loader使用教程,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了如何處理elementUI中表格多選框禁用的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue下拉菜單組件（含搜索）的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue中封裝axios并實現(xiàn)api接口的統(tǒng)一管理
這篇文章主要介紹了vue中封裝axios并實現(xiàn)api接口的統(tǒng)一管理的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue.js根據(jù)代碼運行環(huán)境選擇baseurl的方法
本篇文章主要介紹了vue.js根據(jù)代碼運行環(huán)境選擇baseurl的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
vue項目中的支付功能實現(xiàn)(微信支付和支付寶支付)
本文主要介紹了vue項目中的支付功能實現(xiàn)(微信支付和支付寶支付)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了vue?懶加載組件chunk相對路徑混亂問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在vue項目中使用codemirror插件實現(xiàn)代碼編輯器功能
這篇文章主要介紹了在vue項目中使用codemirror插件實現(xiàn)代碼編輯器功能（代碼高亮顯示及自動提示）,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
開發(fā)項目的時候,用到文件上傳的功能很常見,包括單文件上傳和多文件上傳,下面這篇文章主要給大家介紹了關(guān)于vue3+koa實現(xiàn)文件上傳功能的相關(guān)資料,需要的朋友可以參考下2023-01-01