当前位置：
首页 >
vue双向绑定数组
发布时间：2023/12/20
47
豆豆
众所周知,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.学校试卷生成系统