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