Vue列表数据的同步更新方法

<template>
  <div id="app">
    <ul>
      <!--
        也可以代替{{}} 
        v-text="item.name +'-'+item.price"  
        :class="{odd:index%2}" 当index余2的时候隔行变色 
        
        
        
      <li v-for="(item,index) in list" :key="index" :class="{odd:index%2}" >
        {{item.name}}-{{index}}
      </li>
      -->
      <!-- 遍历-->
      <li v-for="(item,index) in list" :key="index" >
           {{item}}
      </li>
    </ul>
    <button v-on:click="addItem">addItem</button>
  </div>
</template>

<script>
//如果要使用vue全局.
import Vue from 'vue'

export default {
  data() {
    return {
      HELLO: "<span>world</span>",
      num: 1,
      status: true,
      list: [
        {
          name: "apple",
          price: 34
        },
        {
          name: "ban",
          price: 34
        }
      ],
      objList:{
        name:'apple',
        price:34,
        color:'red',
        weight:14
      }
    }
  },
  //绑定方法
  methods:{
     addItem (){
       console.log(this.list);
       //有的方法不能实现双向绑定怎么办
        Vue.set(this.list,1,{
          name: "ban1",
          price: 341
        });

       /*
       this.list.push({
          name: "ban1",
          price: 341
       })
       */
     } 
  }
};
</script>

<style>
</style>