Vue,如何使用v模型

v-model Vue指令允許我們創建雙向綁定。了解如何使用它

v-modelVue指令允許我們創建雙向綁定。

您可以綁定一個表單輸入元素,例如,當用戶更改字段內容時,使其更改Vue數據屬性:

<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>
<select v-model="selected">
  <option disabled value="">Choose a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
  <option>Strawberry</option>
</select>
<span>Fruit chosen: {{ selected }}</span>

方便的指令修飾符

要在發生更改事件時(而不是在用戶每次按鍵時)進行模型更新,可以使用v-model.lazy而不只是v.model

使用輸入字段,v-model.trim很有用,因為它會自動刪除空格。

如果您接受的是數字而不是字符串,請確保使用v-model.number

嵌套屬性

假設您有一個購物車,並且有一個包含用於添加產品的表單的組件:

<template>
  <div class="">
    <h1>Add Product</h1>
    <label>Name</label>: <input>
    <label>Description</label>: <textarea></textarea>
    <button @click="addProduct">Add</button>
  </div>
</template>

<script> export default { name: ‘AddProduct’, data() { return { product: { name: ‘’, description: ‘’ } } }, methods: { addProduct() { console.log(this.product) } } } </script>

為了使表單更新內部屬性product狀態值,您使用product.*

<label>Name</label>: <input v-model="product.name">
<label>Description</label>: <textarea v-model="product.description"></textarea>

免費下載我的Vue手冊


更多vue教程: