vue双向绑定数组和对象有什么区别_后端接收前端json数据

全栈程序员站长

发布于 2022-10-05 10:56:43

1.2K0

发布于 2022-10-05 10:56:43

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

众所周知,vue中v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。

大部分情况,v-model是绑定一个对象的属性，但是如果数据库中的数据是一个数组，这种情况下，如果把数组转换成对象再绑定，然后再转换回去提交到数据库显然是一件工程量很大的事情，本着程序员偷懒的原则，我发现了一个便捷的方法，废话不多说，直接上干货。

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.proxy.ustclug.org/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绑定数组的下标即可实现上图的效果。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年9月14日，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法