vue.js使用v-model實(shí)現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能示例
本文實(shí)例講述了vue.js使用v-model實(shí)現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能。分享給大家供大家參考,具體如下:
v-model 一般表單元素(input) 雙向數(shù)據(jù)綁定
el:'#box',
//這里放的是選擇器。
不然會(huì)不生效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.dbjr.com.cn vue.js數(shù)據(jù)雙向綁定</title> <style> </style> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> <script> window.onload=function(){ new Vue({ el:'#box',//這里放的是選擇器 data:{ msg:'welcome vue' } }); }; </script> </head> <body> <div id="box"> <input type="text" v-model="msg"> <br> {{msg}} </div> </body> </html>
運(yùn)行效果:
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
關(guān)于vue狀態(tài)過渡transition不起作用的原因解決
這篇文章主要介紹了關(guān)于vue狀態(tài)過渡transition不起作用的原因解決,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04vue中設(shè)置height:100%無效的問題及解決方法
這篇文章主要介紹了vue中設(shè)置height 100%無效的問題及解決方法,需要的朋友可以參考下2018-07-07Vue項(xiàng)目開發(fā)常見問題和解決方案總結(jié)
這篇文章主要介紹了Vue項(xiàng)目開發(fā)常見問題和解決方案總結(jié),幫助大家更好的利用vue開發(fā),感興趣的朋友可以了解下2020-09-09Vue實(shí)現(xiàn)數(shù)據(jù)表格合并列rowspan效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)數(shù)據(jù)表格合并列rowspan效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07詳解vue beforeEach 死循環(huán)問題解決方法
這篇文章主要介紹了vue beforeEach 死循環(huán)問題解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02vue中vee validate表單校驗(yàn)的幾種基本使用
這篇文章主要介紹了vee-validate表單校驗(yàn)的基本使用,需要的朋友可以參考下2018-06-06Vue快速實(shí)現(xiàn)通用表單驗(yàn)證功能
這篇文章主要介紹了Vue快速實(shí)現(xiàn)通用表單驗(yàn)證功能,本文通過一個(gè)小例子給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12