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ù)綁定功能,結(jié)合完整實例形式分析了v-model實現(xiàn)表單input元素數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了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.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>
運行效果：
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
關(guān)于vue狀態(tài)過渡transition不起作用的原因解決
這篇文章主要介紹了關(guān)于vue狀態(tài)過渡transition不起作用的原因解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了解決vue-cli3 使用子目錄部署問題,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
vue中設(shè)置height:100%無效的問題及解決方法
這篇文章主要介紹了vue中設(shè)置height 100%無效的問題及解決方法，需要的朋友可以參考下2018-07-07
在大型項目中，我們可能需要拆分應(yīng)用為更小的塊，并僅在需要時再從服務(wù)器加載相關(guān)組件。Vue 提供了defineAsyncComponent 方法來實現(xiàn)此功能,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue項目開發(fā)常見問題和解決方案總結(jié)，幫助大家更好的利用vue開發(fā)，感興趣的朋友可以了解下2020-09-09
Vue實現(xiàn)數(shù)據(jù)表格合并列rowspan效果
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)數(shù)據(jù)表格合并列rowspan效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
詳解vue beforeEach 死循環(huán)問題解決方法
這篇文章主要介紹了vue beforeEach 死循環(huán)問題解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了vee-validate表單校驗的基本使用,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue快速實現(xiàn)通用表單驗證功能，本文通過一個小例子給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
在這里就不過多說watch的用法了，這篇文章主要通過案例帶大家了解一下如何清除過期的副作用。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-01-01