vue實現(xiàn)的雙向數(shù)據(jù)綁定操作示例
更新時間：2018年12月04日 14:15:45 作者：匿名的girl
這篇文章主要介紹了vue實現(xiàn)的雙向數(shù)據(jù)綁定操作,結(jié)合完整實例形式較為詳細的分析了vue.js進行數(shù)據(jù)雙向綁定操作的常見實現(xià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程序設計有所幫助。
相關文章
這篇文章主要介紹了vue-cli(vue腳手架方式搭建),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細介紹了如何利用vue中的draggable插件實現(xiàn)多選拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
vue獲取token實現(xiàn)token登錄的示例代碼
最近新做了個vue項目，正好項目中有登錄部分，本文就詳細的介紹一下登錄部分的實現(xiàn)，文中通過示例代碼介紹的非常詳細，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了Vue實例中el和data的兩種寫法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-11-11
在VUE中實現(xiàn)文件下載并判斷狀態(tài)的方法
今天小編就為大家分享一篇在VUE中實現(xiàn)文件下載并判斷狀態(tài)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
最近在開發(fā)過程對對于組件化的開發(fā)有一些感想，于是開始記錄下這些。彈窗組件一直是 web 開發(fā)中必備的，使用頻率相當高，最常見的莫過于 alert，confirm和prompt這些,不同的組件庫對于彈窗的處理也是不一樣的，下面來一起看看吧。2016-09-09
Vue中watch監(jiān)聽第一次不觸發(fā)、深度監(jiān)聽問題
這篇文章主要介紹了Vue中watch監(jiān)聽第一次不觸發(fā)、深度監(jiān)聽問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue腳手架搭建及創(chuàng)建Vue項目流程的詳細教程
Vue腳手架指的是vue-cli,它是一個快速構建**單頁面應用程序(SPA)**環(huán)境配置的工具，cli是(command-line-interfac)命令行界面,下面這篇文章主要給大家介紹了關于Vue腳手架搭建及創(chuàng)建Vue項目流程的相關資料,需要的朋友可以參考下2022-09-09
vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式
這篇文章主要介紹了vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue2.x 使用 EventBus 進行組件通信，而 Vue3.x 推薦使用 mitt.js。本文就介紹一下mitt.js的具體使用方法，感興趣的可以了解一下2021-06-06