溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue 處理表單input單行文本框的實例代碼

發(fā)布時間:2020-08-24 21:26:10 來源:腳本之家 閱讀:183 作者:Rabbit_svip 欄目:web開發(fā)

用vue監(jiān)聽單行文本框是最最最容易的事。

只需用到 v-model 就能監(jiān)聽。

<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 里面創(chuàng)建一個 msg 變量,用來存儲輸入框的輸入的內容。

在 input 用 v-model 綁定 msg 。

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

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

Vue 處理表單input單行文本框的實例代碼

如上圖所示。

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

總結

以上所述是小編給大家介紹的Vue 處理表單input單行文本框的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI