vue中v-model動態(tài)生成的實例詳解
更新時間：2017年10月27日 11:02:47 作者：湖工電氣
這篇文章主要介紹了vue中v-model動態(tài)生成的實例詳解的相關資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下
vue中v-model動態(tài)生成的實例詳解
前言：
最近在做公司的項目中，有這么一個需求，每一行有一個input和一個select,其中行數(shù)是根據(jù)服務器返回的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)絡請求成功里面;
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ū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
今天小編就為大家分享一篇vue2.0獲取鼠標位置的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue路由傳參的基本實現(xiàn)方式,結合實例形式總結分析了vue.js路由傳參的三種實現(xiàn)方式,包括params顯示傳參、不顯示參數(shù)以及query顯示參數(shù)傳參,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了在vue項目如何使用base64加密，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
electron-vue?運行報錯?Object.fromEntries?is?not?a?function
Object.fromEntries()?是?ECMAScript?2019?新增的一個靜態(tài)方法，用于將鍵值對列表（如數(shù)組）轉換為對象，如果在當前環(huán)境中不支持該方法，可以使用?polyfill?來提供類似功能，接下來通過本文介紹electron-vue?運行報錯?Object.fromEntries?is?not?a?function的解決方案2023-05-05
vue鼠標hover(懸停)改變background-color移入變色問題
這篇文章主要介紹了vue鼠標hover(懸停)改變background-color移入變色問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue中用props給data賦初始值遇到的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vue-cli 3.0 版本與3.0以下版本在搭建項目時的區(qū)別詳解
這篇文章主要介紹了vue-cli 3.0 版本與3.0以下版本在搭建項目時的區(qū)別詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
基于vue+openlayer實現(xiàn)地圖聚合和撒點效果
Openlayers 是一個模塊化、高性能并且功能豐富的WebGIS客戶端的JavaScript包，用于顯示地圖及空間數(shù)據(jù)，并與之進行交互，具有靈活的擴展機制，本文給大家介紹vue+openlayer實現(xiàn)地圖聚合效果和撒點效果，感興趣的朋友一起看看吧2021-09-09
vscode 配置vue+vetur+eslint+prettier自動格式化功能
這篇文章主要介紹了vscode 配置vue+vetur+eslint+prettier自動格式化功能，本文通過實例代碼圖文的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
使用Vue3-Ace-Editor如何在Vue3項目中集成代碼編輯器
這篇文章主要介紹了使用Vue3-Ace-Editor如何在Vue3項目中集成代碼編輯器,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08