ant design vue input change_Vue表單和v-model

一、基本用法

1、文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
           

我們綁定了v-model，當我們對message進行修改的時候，它會自動顯示到頁面上

點選按鈕前

點選按鈕後

我們修改了我們的記憶體，頁面會發生變化

如果使用者對input進行修改，message也會自動變化

這個就是

雙向綁定 2、多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
           

3、複選框 單個複選框，綁定到布爾值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
           

使用label包住input就無需使用id

多個複選框，綁定到同一個數組：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
           

new Vue({   el: '...',   data: {     checkedNames: []   } })
           

如果資料庫要存數字

4、單選按鈕

5、選擇框

如果想多選使用，multiple

6、form用來送出

使用button+form的組合

二、3個修飾符

1、.lazy

在預設情況下，

v-model

在每次

input

事件觸發後将輸入框的值與資料進行同步 。可以添加

lazy

修飾符，進而轉為在

change

事件_之後_進行同步

v-model預設會監聽

a、input事件：鍵盤、滑鼠、以及任何輸入裝置的輸入

b、change事件：隻在input失去焦點時觸發

點選密碼框後（失去焦點）才會變化

2、.number

如果想自動将使用者的輸入值轉為數值類型，可以給

v-model

添加

number

修飾符

3、.trim

如果要自動過濾使用者輸入的首尾空白字元，可以給

v-model

添加

trim

修飾符

三、v-model

本質等價于

vue的雙向綁定就是v=model,v-model可以實作綁定一個變量，在變量變化的時候UI發生變化，使用者改變UI的時候資料也會變化，v-model實際上是v-bind:value和v-on:input的文法糖。如果是原生的input,那麼v-on:input = "xxx = $event.target.value",如果是自定義的元件，v-on:input = "xxx = $event”

四、使用Ant Design of Vue

參考教程

安裝

yarn add ant-design-vue
           

完整引入

可模仿

Ant Design Vue​www.antdv.com