本文實例講述了vue.js使用v-model實現表單元素(input) 雙向數據綁定功能。分享給大家供大家參考,具體如下:
v-model 一般表單元素(input) 雙向數據綁定
el:'#box',
//這里放的是選擇器。
不然會不生效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>www.49028c.com vue.js數據雙向綁定</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>
運行效果:
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具:http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設計有所幫助。
新聞熱點
疑難解答