首先，先申明，大家肯定在看到我de部落格之前，應該已經看了無數篇關於class還有style繫結的部落格，但是可能不理想，那是因為那些都是在app。vue中直接使用或則是在映入js的條件下使用，而不是在使用腳手架並且是在子元件中

先慣例寫寫關於vue文件中的程式碼（以style為例子）

這是大家都看過的，但是我直接使用了，當然沒報錯，也不是因為什麼版本問題，觀察了一下。我看到了data這個“物件”、

覺得很是納悶，為什麼？

  if (!vm) {
    // in a Vue.extend merge, both should be functions
    if (!childVal) {
      return parentVal
    }
//判斷data的類別
        if (typeof childVal !== 'function') {
      process.env.NODE_ENV !== 'production' && warn(
        'The "data" option should be a function ' +
        'that returns a per-instance value in component ' +
        'definitions.',
        vm
      )
      return parentVal
    }
    if (!parentVal) {
      return childVal
    }
 

這個是文件裡面的，看得出來，如果是在子元件，我們看到的應該是使用data“函式”，所以這方法肯定不對

Vue 例項的資料物件。Vue.js 會遞迴地將它全部屬性轉為 getter/setter，從而讓它能響應資料變化。這個物件必須是普通物件：原生物件，getter/setter 及原型屬性會被忽略。不推薦觀察複雜物件。

在例項建立之後，可以用 vm.$data 訪問原始資料物件。Vue 例項也代理了資料物件所有的屬性。

在定義元件時，同一定義將建立多個例項，此時 data 必須是一個函式，返回原始資料物件。如果 data 仍然是一個普通物件，則所有的例項將指向同一個物件！換成函式後，每當建立一個例項時，會呼叫這個函式，返回一個新的原始資料物件的副本。

以上內容均來自官網，說得很清楚啊。

檔案寫成.vue的檔案就是元件的寫法，因此這時data必須是一個函式，而你貼的var vm = new Vue({})是直接跑在瀏覽器環境下的用法，這時data可以是一個普通物件，也可以寫成一個返回普通物件的函式，不過沒必要。
當然，這些都是在腳手架裡面的，如果只是單純的引入js檔案，那麼data就無所謂了
 

在例項中data是物件, 在元件中data就得是函式返回物件

就是main。js中是例項，在元件中就應該是函數了，

解析來上程式碼了：

<div class="index_nav">
			<ul v-bind:style="mystyle">
				<li v-for="(tab,index) in tabs" @click="methods2(tab.text,index)">{{tab.text}}</li>
				<li style="clear:both;"></li>
			</ul>
		</div>
 

	export default {
		name: "index",
		data: function() {
			return {
				//被選中的tab標籤的陣列
				//假定陣列
				allinfo: [{
						name: "a",
						age: "1",
						address: "廣東"
					},
					{
						name: "a",
						age: "1",
						address: "廣西"
					},
					{
						name: "a",
						age: "1",
						address: "雲南"
					}
				],
				chosetype: {
					chosename: "全部",
					choseindex: "0"
				},
				message: "",
				tabs: [{ text: '全部' }, { text: "保養" }, { text: "機械" }, { text: "清潔" }],
				mystyle: {
					height: '1.2rem',
					width: '2rem'
				}
			}
		},
		methods: {
			methods1: function() {
				console.log("你剛剛點選搜尋按鈕");
				console.log(this.message);
			},
			//tab選項切換
			methods2: function(tab, index) {
				console.log(tab);
				console.log(index);
				this.chosetype.chosename = tab;
				this.chosetype.choseindex = index;
				console.log(this.chosetype);
				this.allinfo.push({"name": this.chosetype, "age": chosetype.index, "choseindex": chosetype.chosename});
			}
		},
		created: function() {
			this.mystyle.width = 2.2 * this.tabs.length + 0.2 + "rem";
			console.log(this.tabs.length);

		},
	}