<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <h1>{{ obj.a }}</h1>
    <p>以下是新生成的属性</p>
    <section>b={{ obj.b }}</section>
    <button @click="modifyA">变更a的值</button>
    <button @click="generateB">点击我生成新的属性</button>
    <button @click="appendWatcherB">使追加的值展示出来</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        a: 1
      }
    };
  },
  methods: {
    modifyA(){
      this.obj.a = this.obj.a + 1
    },
    generateB(){
      this.obj.b = 100
      console.info(this.obj)
    },
    appendWatcherB(){
      this.$set(this.obj, 'b', 200)
      console.info(this.obj)
      // 只有在加了这个代码之后，界面的更新才能够正常的展示出来
      this.$forceUpdate()
    }
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}
</style>