vue實現(xiàn)的雙向數(shù)據(jù)綁定操作示例
更新時間：2018年12月04日 14:15:45 作者：匿名的girl
這篇文章主要介紹了vue實現(xiàn)的雙向數(shù)據(jù)綁定操作,結(jié)合完整實例形式較為詳細的分析了vue.js進行數(shù)據(jù)雙向綁定操作的常見實現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了vue實現(xiàn)的雙向數(shù)據(jù)綁定操作。分享給大家供大家參考，具體如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>經(jīng)典的雙向數(shù)據(jù)綁定</title>
<script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script>
</head>
<body>
<div id="container">
<button @click="modifyMsg">修改msg</button>
<!-- 方向1：將定義好的數(shù)據(jù)綁定到試圖
實現(xiàn)方式：雙花括號
常見指令：v-for v-if v-show …… -->
<!-- 方向2：將視圖中用戶操作的結(jié)果 綁定到指定的數(shù)據(jù) (多數(shù)指表單控件 input/textarea/select)
實現(xiàn)方式： v-model
-->
<p>{{msg}}</p>
<input type="text" v-model="userAddress">
<p>{{"用戶修改的數(shù)據(jù)："+userAddress}}</p>
<hr>
<h2>v-model.number</h2>
<input type="text" v-model.number="n">
<br>
<input type="text" v-model.number="m">
<br>
<button @click="getNum">求和</button>
<span>{{num}}</span>
<hr>
<h2>v-model.trim</h2>
<h5>沒有過濾首尾空格時：</h5>
<input type="text" v-model="myInput">
<span>{{myInput.length}}</span>
<h5>過濾首尾空格時：</h5>
<input type="text" v-model.trim="myInput">
<span>{{myInput.length}}</span>
<h2>v-moddel.lazy</h2>
<h5>input失去焦點時才會輸出myMsg</h5>
<input type="text" v-model.lazy="myMsg">
<span>{{myMsg}}</span>
</div>
<script>
new Vue({
el:"#container",
data:{
msg:"Hello VueJs",
userAddress:"",
n:0,
m:0,
num:0,
myInput:0,
myMsg:""
},
methods:{
modifyMsg:function(){
this.msg = "Hello Model"
},
getNum:function(){
this.num = this.n+this.m;
}
}
})
</script>
</body>
</html>
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試，可得到如下運行效果
感興趣的朋友可以測試一下看看運行效果。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
vue3圖片剪裁插件vue-img-cutter使用小結(jié)
Vue.js是一款流行的JavaScript前端框架,很受用戶喜愛,這篇文章主要介紹了vue3圖片剪裁插件vue-img-cutter使用小結(jié),本文結(jié)合示例代碼講解的非常詳細,感興趣的朋友一起看看吧2024-01-01
CodeMirror提供了強大的代碼編輯功能,而Vue.js使得組件的創(chuàng)建和數(shù)據(jù)綁定變得非常簡單,當用戶編輯代碼時,實時預(yù)覽會根據(jù)代碼的變化進行更新,從而為用戶提供了一個交互式的編程環(huán)境,這篇文章主要介紹了Vue中如何進行代碼編輯器與實時預(yù)覽,需要的朋友可以參考下2023-10-10
vue+elementui 實現(xiàn)新增和修改共用一個彈框的完整代碼
Element-Ul是餓了么前端團隊推出的一款基于Vue.js 2.0 的桌面端UI框架，手機端有對應(yīng)框架是Mint UI ，今天給大家普及vue+elementui 實現(xiàn)新增和修改共用一個彈框的完整代碼，一起看看吧2021-06-06
這篇文章主要為大家介紹了vuex?Mutations同步Actions異步原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
Vue?echarts實例項目地區(qū)銷量趨勢堆疊折線圖實現(xiàn)詳解
Echarts，它是一個與框架無關(guān)的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用，因為我的習慣，每次新嘗試做一個功能的時候，總要新創(chuàng)建個小項目，做做Demo2022-09-09
footer為公用組件，其他頁面都需要引入。接下來通過本文給大家分享vue項目中公用footer組件底部位置的適配問題,需要的朋友可以參考下2018-05-05
vue項目中使用AES實現(xiàn)密碼加密解密（ECB和CBC兩種模式）
這篇文章主要介紹了vue項目中使用AES實現(xiàn)密碼加密解密的方法，主要是通過ecb和cbc兩種模式，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)分頁查詢功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
Vue?2中實現(xiàn)CustomRef方式防抖節(jié)流
這篇文章主要為大家介紹了Vue?2中實現(xiàn)CustomRef方式防抖節(jié)流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了vue的mixins屬性詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03