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