var vm = new Vue({
 data: {
  items: ['a', 'b', 'c']
 }
})
vm.items[1] = 'x' // 不是響應(yīng)性的,
vm.items.length = 2 // 不是響應(yīng)性的

//解決第一類問題

vm.$set(vm.items, indexOfItem, newValue)

//為了解決第二類問題，你可以使用 splice：

vm.items.splice(newLength)

var vm = new Vue({
 data: {
  userProfile: {
   name: 'Anika'
  }
 }
})

vm.userProfile.age = 27;  //看著沒問題，實(shí)際上Vue無法監(jiān)控

//錯(cuò)誤
Object.assign(vm.userProfile, {
 age: 27,
 favoriteColor: 'Vue Green'
})

//正確
vm.userProfile = Object.assign({}, vm.userProfile, {
 age: 27,
 favoriteColor: 'Vue Green'
})

v-for = "(val,index) in arr" 
//得到的就是值和數(shù)組下標(biāo)

//習(xí)慣性用法
<div v-for="(val,index) in arr" :key="index">
</div>

v-for = "(val,key,index) in object" 
//得到的就是鍵值對還有下標(biāo)

//習(xí)慣性用法
<div v-for = "(val,key,index) in object" :key="index">
</div>

<div class="siteBox" id="siteBox" v-if="isShow">
  <header>
    <ul class="classify">
      <li :class="{active:isClassify===key}" v-for="(arr,key,index) in this.locationName" :key="index" @click="isClassify=key">
        <a class="classify-a" href="#" rel="external nofollow" rel="external nofollow" >{{key}}</a>
      </li>
    </ul>
  </header>
  <main class="site-name">
    <dl v-for="value of isClassify">
      <dt>{{value}}</dt>
      <div class="list-dd">
        <dd v-for="(val,index) in locationName[isClassify][value]" :key="index" @click="site=val;isShow=false">
          <a class="list-a" href="#" rel="external nofollow" rel="external nofollow" >{{val}}</a>
        </dd>
      </div>
    </dl>
  </main>
</div>

methods:{
  getData(){
    let xhr = new XMLHttpRequest();           //原生ajax
    xhr.open('get','http://127.0.0.1:3001/read');    //請求mock
    xhr.send();
    xhr.onreadystatechange = ()=> {
      if (xhr.readyState === 4 && xhr.status === 200) {
        let locationN = JSON.parse(xhr.responseText);    //獲取數(shù)據(jù)，地點(diǎn)json
        for (let key of Object.keys(locationN)) {      //遍歷取出數(shù)據(jù)，取得鍵值
          for(let key2 of Object.keys(this.locationName)){    //遍歷data中l(wèi)ocationName，為了分類
            let pattern = new RegExp("["+key2.toString()+"]");   
            if(pattern.test(key)){               //正則匹配，如果找到就進(jìn)入對應(yīng)的分類對象中
              
              //判斷該類中是否存在該字母這地名集合，如A，B，C
              if (Array.isArray(this.locationName[key2][key.charAt(0)])) {
                //如果存在則直接推入地名
                this.locationName[key2][key.charAt(0)].push(locationN[key]);
                
                //沒有則先創(chuàng)建再推入地名
              } else {
                this.$set(this.locationName[key2],key.charAt(0),[]);
                this.locationName[key2][key.charAt(0)].push(locationN[key]);
              }
              break;
            }
          }
        }
      }
    }
  },
}