js對象屬性 經過點(.) 和 方括號([]) 的不一樣之處

關於這個問題，是我在作vue項目時的一個需求，讓我對JS的.和[]的區別產生了興趣。

---

我須要點擊一個自定義的icon喚醒element UI的時間日期選擇器的picker（也就是那個選擇器），因而在vue中，給每一個不一樣的時間選擇器組件定義本身的ref。並寫了一個函數來操做它們。

在Vue的模板中，咱們能夠在模板中的任何元素中添加ref屬性，這樣就能夠在Vue實例中引用這些元素。

<el-date-picker ref="deadLine"></el-date-picker>
<img src="xxx.jpg" @click="openTimePad('deadLine')">

openTimePad（ref）{
 this.$refs.ref.pickerVisible = true
}
// pickerVisible是element UI時間日期選擇組件的屬性，控制picker的顯示。

然而這樣寫以後會報錯，pickerVisible of undefined，也就是咱們根本就沒有拿到這個ref應用的這個DOM,因而換一個寫法。

openTimePad（ref）{
 this.$refs[ref].pickerVisible = true
}

這樣就起做用了。

---

在JS中.和[]都是訪問對象的屬性，對象屬性以字符串形式保存，在[]中填的是字符串，字符串是js的數據類型，js能夠改變它，因而動態的屬性，都須要經過[]來訪問。