Vue常用指令V-model用法
更新時(shí)間：2017年03月08日 16:55:57 作者：閣下長(zhǎng)的好生俊俏
本篇文章主要介紹了Vue常用指令_V-model用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
v-model這個(gè)指令只能用在<input>, <select>,<textarea>這些表單元素上，所謂雙向綁定，指的就是我們?cè)趈s中的vue實(shí)例中的data與其渲染的dom元素上的內(nèi)容保持一致，兩者無(wú)論誰(shuí)被改變，另一方也會(huì)相應(yīng)的更新為相同的數(shù)據(jù)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var vm = 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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var vm = 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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'.box',
data:{
msg:'welcome vue'
}
});
}
</script>
</head>
<body>
<div class="box">
<input type="text" v-model='msg'/>
<br />
<input type="text" v-model='msg'/>
<br />
{{msg}}
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/Vue.js" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new Vue({
el:'.box',
data:{
msg:'welcome vue',
msg2:12,
msg3:true,
arr:['app','orange','pare']
}
});
}
</script>
</head>
<body>
<div class="box">
<input type="text" v-model='msg'/>
<br />
<input type="text" v-model='msg'/>
<br />
{{msg}}
<br />
{{msg2}}
<br />
{{msg3}}
<br />
{{arr}}
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue路由模式中的hash和history模式詳細(xì)介紹
VUE分為兩種路由模式分別是hash（哈希）和history，他們的區(qū)別是hash模式不會(huì)包含在http請(qǐng)求中，并且不會(huì)重新加載頁(yè)面，而使用history模式的話，如果前端的url和后端發(fā)起請(qǐng)求的url不一致的話，會(huì)報(bào)404錯(cuò)誤，所以使用history模式的話我們需要和后端進(jìn)行配合2022-09-09
vue使用JSON編輯器:vue-json-editor詳解
文章介紹了如何在Vue項(xiàng)目中使用JSON編輯器插件`vue-json-editor`,包括安裝、引入、注冊(cè)和使用示例,通過(guò)這些步驟,用戶可以在Vue應(yīng)用中輕松實(shí)現(xiàn)JSON數(shù)據(jù)的編輯功能,文章最后呼吁大家支持腳本之家2025-01-01
這篇文章主要介紹了vue如何實(shí)現(xiàn)上傳圖片和顯示圖片問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue+elementui實(shí)現(xiàn)點(diǎn)擊table中的單元格觸發(fā)事件--彈框
這篇文章主要介紹了vue+elementui實(shí)現(xiàn)點(diǎn)擊table中的單元格觸發(fā)事件--彈框，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
詳解mpvue scroll-view自動(dòng)回彈bug解決方案
設(shè)置了scroll-top的scroll-view組件，在組件所在vue實(shí)例data發(fā)生改變時(shí)會(huì)自動(dòng)回彈到最上方，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-10-10
細(xì)說(shuō)Vue組件的服務(wù)器端渲染的過(guò)程
這篇文章主要介紹了細(xì)說(shuō) Vue 組件的服務(wù)器端渲染，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
vue使用$store.commit() undefined報(bào)錯(cuò)的解決
這篇文章主要介紹了vue使用$store.commit() undefined報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue跳轉(zhuǎn)頁(yè)簽傳參并查詢參數(shù)的保姆級(jí)教程
這篇文章主要介紹了vue跳轉(zhuǎn)頁(yè)簽傳參并查詢參數(shù)的保姆級(jí)教程,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue打包(hash和history)部署詳細(xì)步驟,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
親自動(dòng)手實(shí)現(xiàn)vue日歷控件
這篇文章主要記錄了親自動(dòng)手實(shí)現(xiàn)vue日歷控件的詳細(xì)過(guò)程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06