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

全栈程序员-站长 • 2025年11月17日上午11:22 • 未分类 • 阅读 5

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

vue双向绑定数组和对象有什么区别_后端接收前端json数据
众所周知,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>