適用於初學者的 VueJs VueJs 部分資料綁定

在先前的部落格/文章中，我們學習如何建立、匯入和使用元件。這次，我們將探討元件中的資料綁定。

在組件內使用數據

在組件中定義資料
資料在 data() 函數中定義並作為物件傳回。
這是一個例子：

data() {
  return {
    message: 'Hello World!'
  };
}

與指令綁定

v-bind：將 HTML 屬性綁定到資料。

<img v-bind:src="imageUrl" alt="Example Image">

v-model：v-model 指令用於表單輸入上的雙向資料綁定。它將輸入值與 Vue 實例資料保持同步。本質上，v-model 結合了@input（監聽更改）和:value（設定輸入值）。例如：

<input v-model="message" />

這相當於：

<input :value="message" @input="message = $event.target.value" />

以下是如何分別使用 :value 和 @input:

<input :value="message" @input="message = $event.target.value" />

v-if 指令根據布林值有條件地渲染元素。如果條件為真，則將渲染該元素；如果為假，則不會。例如：

<p v-if="isVisible">This is visible!</p>

v-for 指令用於循環遍歷數組或物件來渲染元素。每個元素都可以被賦予一個唯一的密鑰以獲得更好的性能。例如：

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

v-on
v-on 指令用於監聽元素上的事件。為了方便起見，您可以使用簡寫@。例如：

<button v-on:click="handleClick">Click me!</button>

這可以縮短為：

<button @click="handleClick">Click me!</button>

以上是適用於初學者的 VueJs VueJs 部分資料綁定的詳細內容。更多資訊請關注PHP中文網其他相關文章！