【Vue表單】單行文字框

摘要： 微信訂閱號：Rabbit_svip 用vue監聽單行文字框是最最最容易的事。 只需用到 v-model 就能監聽。 <template> <div id="app"> <input...

用vue監聽單行文字框是最最最容易的事。

只需用到 v-model 就能監聽。

<template>
<div id="app">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
</template>

<script>
export default {
name: 'app',
data () {
return {
msg: ''
}
}
}
</script>

在 data 裡面建立一個 msg 變數，用來儲存輸入框的輸入的內容。

在 input 用 v-model 繫結 msg 。

這時輸入框輸入的所有內容，都會實時更新到 msg 裡。

所以 <p> 標籤裡的內容也會實時更新輸入框所輸入的內容。

如上圖所示。

需要注意的是，用了 v-model 後，輸入框在輸入內容時， input 的 value 是沒有變化的。因為 v-model 並不是指向 input 的 value 。