js对象属性 通过点(.) 和 方括号([ ]) 的不同之处

哈哈

先来张图，看看问题：

输入框的实现是用v-for。可以很清楚的看到问题，我不管在哪个输入框输入，都监听的是一样的值。其实现代码如下：

<x-input v-for="(v, k) in title" :title="v" :key="k" v-model="contract.k"></x-input>

其中title和contract的数据结构是：

contract: {
      contract_num: "",
      tax_payer: "",
      company_name: "",
      legal_person: "",
      principal_person: "",
      principal_person_phone: "",
      company_addr: "",
      contract_date: "",
      expiry_time: "",
      purcha_num: "",
      legal_person_phone: ""
},
title: {
	  contract_num: "合同号:",
	  tax_payer: "纳税人识别号:",
	  company_name: "公司名:",
	  legal_person: "法人:",
	  principal_person: "负责人:",
	  principal_person_phone: "负责人电话:",
	  company_addr: "公司地址:",
	  contract_date: "合同日期:",
	  expiry_time: "合同有效期:",
	  purcha_num: "购买设备数量:",
	  legal_person_phone: "法人联系方式:"
}

想了想，是什么原因呢？不太明白。再一想，Object引用的方式有两种，分别为：

// 用title作为例子
title.contract_num == "合同号" // true
title[contract_num] == "合同号" // 还是true

所以就改了一下方式，还别说，成功了。代码如下：

<x-input v-for="(v, k) in title" :title="v" :key="k" v-model="contract[k]"></x-input>

好奇之下问百度，得到了如下解释：

js对象属性 通过点(.) 和 方括号([ ]) 的不同之处

1. [ ]–可以用变量作为属性名或访问,而点方法不可以;
2. [ ]中括号法–可以用数字作为属性名,而点语法不可以;
3. [] 可以动态访问的属性名，可以在程序运行时创建和修改属性，点操作符就不行！
4. [] 如果属性名中包含会导致语法错误的字符，或者属性名是关键字或者保留字，也可以使用方括号表示法。
   所以，本例中刚好犯了第三条。半路出家，JavaScript基础还是不牢固。

参考链接：https://www.cnblogs.com/ljt1412451704/p/8683158.html