vue双向绑定数组
眾所周知,vue中v-model 會忽略所有表單元素的 value、checked、selected attribute 的初始值而總是將 Vue 實例的數據作為數據來源。
大部分情況,v-model是綁定一個對象的屬性，但是如果數據庫中的數據是一個數組，這種情況下，如果把數組轉換成對象再綁定，然后再轉換回去提交到數據庫顯然是一件工程量很大的事情，本著程序員偷懶的原則，我發現了一個便捷的方法，廢話不多說，直接上干貨。
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雙向綁定數組</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>這里我用最簡單的方法，給大家演示了一下，利用item遍歷數組，然后利用index索引找到數組的下標，v-model綁定數組的下標即可實現上圖的效果。
總結
- 上一篇： 如何快速在服务器上搭建隧道ip
- 下一篇： 【计算机毕业设计】22.学校试卷生成系统