Vue 處理表單input單行文本框的實例代碼
更新時間：2019年05月09日 08:31:01 作者：Rabbit_svip
這篇文章主要Vue 處理表單input單行文本框的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
用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 變量，用來存儲輸入框的輸入的內(nèi)容。
在 input 用 v-model 綁定 msg 。
這時輸入框輸入的所有內(nèi)容，都會實時更新到 msg 里。
所以 <p> 標(biāo)簽里的內(nèi)容也會實時更新輸入框所輸入的內(nèi)容。
如上圖所示。
需要注意的是，用了 v-model 后，輸入框在輸入內(nèi)容時， input 的 value 是沒有變化的。因為 v-model 并不是指向 input 的 value 。
總結(jié)
以上所述是小編給大家介紹的Vue 處理表單input單行文本框的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
vue-cli單頁應(yīng)用改成多頁應(yīng)用配置詳解
本篇文章主要介紹了vue-cli單頁應(yīng)用改成多頁應(yīng)用配置詳解，具有一定的參考價值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了nuxt中刷新頁面后防止store值丟失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue設(shè)置默認(rèn)首頁的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue Tooltip提示動態(tài)換行問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了ant design 日期格式化的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了關(guān)于Vue-cli3煩人的eslint問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue如何給頁面增加url前綴問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了解決vue項目router切換太慢問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
詳解幾十行代碼實現(xiàn)一個vue的狀態(tài)管理
這篇文章主要介紹了詳解幾十行代碼實現(xiàn)一個vue的狀態(tài)管理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue如何通過點(diǎn)擊事件實現(xiàn)頁面跳轉(zhuǎn)詳解
頁面跳轉(zhuǎn),我們一般都通過路由跳轉(zhuǎn)實現(xiàn),通常情況下可直接使用router-link標(biāo)簽實現(xiàn)頁面跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于vue如何通過點(diǎn)擊事件實現(xiàn)頁面跳轉(zhuǎn)的相關(guān)資料,需要的朋友可以參考下2022-07-07