在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue組件data屬性返回數(shù)據(jù)的問題？

vue組件data屬性返回數(shù)據(jù)的問題？

<div id="app">
  <my-component></my-component>
  <my-component></my-component>
  <my-component></my-component>
</div>
<script>
    var data = {
      counter: 0
    };
    
    Vue.component('my-component', {
      template: '<button @click="counter++">{{ counter }}</button>',
      data: function() {
      return data;
        }
    });
    
    var app = new Vue({
      el: '#app'
    })
</script>

我知道這個點擊任一button，counter都會+1。
但是，template: '<button @click="counter++">{{ counter }}</button>',這一行里面的counter不應該寫成data.counter嗎？為什么直接寫對象里面的屬性也可以使用？

回答
編輯回答
離魂曲

Vue 已經(jīng)自動將counter綁定到數(shù)據(jù)對象上了。

2018年7月25日 07:38
編輯回答
賤人曾

注意這里：

data: function() {
  return data;
}

這里的第一個data對象得到的是下面這個對象：

var data = {
      counter: 0
    };

第二個data并非是第一個data的屬性，而是上面var聲明的data的引用。
實際上相當于這樣：

data: function() {
  return {
    counter:0
  }
}

有時候并非所有的變量聲明都寫在return里，這時候可以直接這樣return。
當然也可以這樣：

var key1 ={xxx:xxx};
data: function() {
  return {
    //一些已有變量
    key:value,
    //外部變量
    key1
  }
}
2018年8月23日 20:32