快捷導(dǎo)航

vue中v-model動(dòng)態(tài)生成的實(shí)例詳解

更新時(shí)間：2017年10月27日 11:02:47 作者：湖工電氣

這篇文章主要介紹了vue中v-model動(dòng)態(tài)生成的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下

vue中v-model動(dòng)態(tài)生成的實(shí)例詳解

前言：

最近在做公司的項(xiàng)目中，有這么一個(gè)需求，每一行有一個(gè)input和一個(gè)select,其中行數(shù)是根據(jù)服務(wù)器返回的json數(shù)據(jù)動(dòng)態(tài)變化的。那么問(wèn)題來(lái)了，我們要怎樣動(dòng)態(tài)生成v-model？

現(xiàn)在項(xiàng)目做完了就整理了一下，直接貼代碼了。

<!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)建一個(gè)空的數(shù)組 
        dataModel: []
      },
      created: function(){
        // 這里是動(dòng)態(tài)生成v-model,這個(gè)可以放在網(wǎng)絡(luò)請(qǐ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>

效果圖：

如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

使用Vue和Firebase實(shí)現(xiàn)后臺(tái)數(shù)據(jù)存儲(chǔ)的示例代碼
在現(xiàn)代 web 應(yīng)用開(kāi)發(fā)中,前端和后端的無(wú)縫協(xié)作至關(guān)重要,借助 Firebase 等云計(jì)算解決方案,前端開(kāi)發(fā)者可以輕松實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)與實(shí)時(shí)更新,本文將為大家詳細(xì)介紹如何利用 Vue 3 的 Composition API 和 Firebase 實(shí)現(xiàn)后臺(tái)數(shù)據(jù)存儲(chǔ),需要的朋友可以參考下
2024-10-10
Vue-loader使用教程
Vue-loader其實(shí)就是一個(gè)webpack的loader，用來(lái)把vue組件轉(zhuǎn)換成可部署的js, html, css模塊，這篇文章主要介紹了Vue-loader使用教程,需要的朋友可以參考下
2022-08-08
如何處理elementUI中表格多選框禁用的問(wèn)題
這篇文章主要介紹了如何處理elementUI中表格多選框禁用的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue下拉菜單組件（含搜索）的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue下拉菜單組件（含搜索）的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
vue中封裝axios并實(shí)現(xiàn)api接口的統(tǒng)一管理
這篇文章主要介紹了vue中封裝axios并實(shí)現(xiàn)api接口的統(tǒng)一管理的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-12-12
vue.js根據(jù)代碼運(yùn)行環(huán)境選擇baseurl的方法
本篇文章主要介紹了vue.js根據(jù)代碼運(yùn)行環(huán)境選擇baseurl的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
vue項(xiàng)目中的支付功能實(shí)現(xiàn)(微信支付和支付寶支付)
本文主要介紹了vue項(xiàng)目中的支付功能實(shí)現(xiàn)(微信支付和支付寶支付)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
vue?懶加載組件chunk相對(duì)路徑混亂問(wèn)題及解決
這篇文章主要介紹了vue?懶加載組件chunk相對(duì)路徑混亂問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
在vue項(xiàng)目中使用codemirror插件實(shí)現(xiàn)代碼編輯器功能
這篇文章主要介紹了在vue項(xiàng)目中使用codemirror插件實(shí)現(xiàn)代碼編輯器功能（代碼高亮顯示及自動(dòng)提示）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-08-08
vue3+koa實(shí)現(xiàn)文件上傳功能的全過(guò)程記錄
開(kāi)發(fā)項(xiàng)目的時(shí)候,用到文件上傳的功能很常見(jiàn),包括單文件上傳和多文件上傳,下面這篇文章主要給大家介紹了關(guān)于vue3+koa實(shí)現(xiàn)文件上傳功能的相關(guān)資料,需要的朋友可以參考下
2023-01-01