Vue中的data選項用于聲明組件內使用的數據,我們可以在這個對象里定義一些變量以及函數,然后在組件內訪問這些數據來完成對視圖的渲染或者操作。下面是一個例子,聲明了一個data對象,其中包含了一個名為message的屬性。
data() { return { message: 'Hello, World!' } }
我們可以在組件中渲染這個屬性,例如下面這個例子,模板代碼中使用{{}}的方式獲取了數據,并渲染到了視圖上。
{{ message }}
在組件中還可以對這個屬性進行修改,例如下面的代碼就演示了如何在組件中修改這個屬性,并重新渲染到視圖上。
{{ message }}
在這個組件中,我們添加了一個按鈕,點擊按鈕就會觸發changeMessage函數,這個函數會將data中的message屬性修改為'Hello, Vue!',然后Vue會重新渲染這個組件,讓我們看到新的視圖。