vue.js使用v-model實現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能示例
更新時間：2019年03月08日 12:06:49 作者：白楊-M
這篇文章主要介紹了vue.js使用v-model實現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能,結合完整實例形式分析了v-model實現(xiàn)表單input元素數(shù)據(jù)雙向綁定相關操作技巧,需要的朋友可以參考下
本文實例講述了vue.js使用v-model實現(xiàn)表單元素(input) 雙向數(shù)據(jù)綁定功能。分享給大家供大家參考，具體如下：
v-model 一般表單元素(input) 雙向數(shù)據(jù)綁定
el:'#box',//這里放的是選擇器。
不然會不生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.dhdzp.com 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>
運行效果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設計有所幫助。
相關文章
手把手教你寫一個vue全局注冊的Toast的實現(xiàn)
本文主要介紹了手把手教你寫一個vue全局注冊的Toast的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
這篇文章主要介紹了Vue關于自定義事件的$event傳參問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue組件的層級關系，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等屬性的縮寫,本文我用動態(tài)綁定background-image來舉例,感興趣的朋友跟隨小編一起看看吧2023-10-10
vue+elementUI多表單同時提交及表單校驗最新解決方案
假設有一個頁面,需要分三步填寫三個表單,且每個表單位于獨立的組件中,然后最后保存同時提交,如何進行表單必填項校驗,下面小編給大家介紹vue+elementUI多表單同時提交及表單校驗最新解決方案,感興趣的朋友一起看看吧2024-03-03
這篇文章主要為大家介紹了vue實現(xiàn)無縫滾動手摸手教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
vuex存儲復雜參數(shù)(如對象數(shù)組等)刷新數(shù)據(jù)丟失的解決方法
今天小編就為大家分享一篇vuex存儲復雜參數(shù)(如對象數(shù)組等)刷新數(shù)據(jù)丟失的解決方法。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue中computed和watch的綜合運用實例,主要需求是點擊按鈕實現(xiàn)天氣的切換效果結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-04-04
今天小編就為大家分享一篇基于vue循環(huán)列表時點擊跳轉頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue{{}}拼接字符串和換行符方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12