vue双向绑定数组
眾所周知,vue中v-model 會(huì)忽略所有表單元素的 value、checked、selected attribute 的初始值而總是將 Vue 實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來(lái)源。
大部分情況,v-model是綁定一個(gè)對(duì)象的屬性，但是如果數(shù)據(jù)庫(kù)中的數(shù)據(jù)是一個(gè)數(shù)組，這種情況下，如果把數(shù)組轉(zhuǎn)換成對(duì)象再綁定，然后再轉(zhuǎn)換回去提交到數(shù)據(jù)庫(kù)顯然是一件工程量很大的事情，本著程序員偷懶的原則，我發(fā)現(xiàn)了一個(gè)便捷的方法，廢話不多說(shuō)，直接上干貨。
HTML代碼如下：
<!DOCTYPE html> <html lang="en"> <head><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue雙向綁定數(shù)組</title> </head> <body> <div id="app"><v-app><!-- 表格 --><table><tr><td v-for="(item,index) in arr"><!-- 文本框 --><v-text-field v-model="arr[index]"></v-text-field></td></tr><tr><td v-for="(item,index) in arr"><span>{{item}}</span></td></tr></table></v-app> </div>js代碼如下：
<!-- 引入vue --> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <!-- 引入vuetify --> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <script>new Vue({el: '#app',vuetify: new Vuetify(),data () {return{arr:[12123,134123,12]}},}) </script>這里我用最簡(jiǎn)單的方法，給大家演示了一下，利用item遍歷數(shù)組，然后利用index索引找到數(shù)組的下標(biāo)，v-model綁定數(shù)組的下標(biāo)即可實(shí)現(xiàn)上圖的效果。
總結(jié)
- 上一篇： 如何快速在服务器上搭建隧道ip
- 下一篇： 【计算机毕业设计】22.学校试卷生成系统