溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Vue數據雙向綁定如何實現”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue數據雙向綁定如何實現”文章能幫助大家解決問題。
在web開發應用中，很多項目都會用到表格一列的組件進行數據的傳輸、獲取和提交，在開發使用中，表格類組件數據的傳輸，我們一般可以使用v-model將輸入的數據同步到data屬性中，這個指令可以為不同的輸入元素使用不同的屬性，這個指令一般在form表單中的input等等元素上面來創建雙向的數據綁定。
在vue實戰項目中，vue里面的data屬性可以和input、textarea元素進行數據綁定。簡單的解釋就是比如input這個事件被觸發的時候，value里面的數據就可以將數據聽不到Script里面的data數據中；當綁定的data數據發生改變的時候，也會實時的同步到value當中，從而就可以實現雙向數據綁定。
我們可以通過代碼進行驗證，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>數據雙向綁定</title>
</head>
<body>
<div id="app">
<p>姓名：
<input type="text" v-model="userInfo.xingming">
</p>
<p>郵箱：
<input type="text" v-model="userInfo.youxiang">
</p>
<p>簡歷：
<textarea name="" id="" cols="30" rows="10" v-model="userInfo.jianli"></textarea>
</p>
<p>姓名：{{userInfo.xingming}}</p>
<p>郵箱：{{userInfo.youxiang}}</p>
<p>簡歷：{{userInfo.jianli}}</p>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
userInfo:{
xingming:'',
youxiang:'',
jianli:"編寫你的簡歷："
}
}
})
</script>
</body>
</html>運行結果：
在vue實戰中，這兩個元素也和input和textarea元素一樣，都是和data屬性一樣，選擇數據綁定，而且CheckBox就是多選元素，可以選擇多個value，可以在data里面使用一個數組進行綁定。只要change事件得到觸發，value屬性可以同步到data里面；當綁定vue里面的數據改變的時候，就會同步到check里面，從而實現數據的雙向綁定。我們還是通過簡單的代碼實例來看一下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>數據雙向綁定</title>
</head>
<body>
<div id="app">
<p>性別：
<input type="radio" v-model="userinfo.sex" name="sex" value="男">男
<input type="radio" v-model="userinfo.sex" name="sex" value="女">女
</p>
<p>愛好：
<input type="checkbox" v-model="userinfo.hobby" value="唱"/>唱
<input type="checkbox" v-model="userinfo.hobby" value="跳"/>跳
<input type="checkbox" v-model="userinfo.hobby" value="rap"/>rap
<input type="checkbox" v-model="userinfo.hobby" value="籃球"/>籃球
</p>
<p>練習生與否：
<input type="checkbox" v-model="userinfo.lianxisheng" value="練習生">
</p>
<p>性別：{{userinfo.sex}}</p>
<p>愛好：{{userinfo.hobby}}</p>
<p>練習生與否：{{userinfo.lianxisheng}}</p>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
userinfo:{
sex:'男',
hobby:'【】',
lianxisheng:" "
}
}
})
</script>
</body>
</html>
select元素也是使用了value屬性和vue里面的data屬性進行屬性綁定，當change事件觸發的時候，value的值就會同步到vue里面的數據，當綁定的vue數據改變的時候，也會同步到value，也從而實現數據的雙向綁定。代碼實例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>數據雙向綁定</title>
</head>
<body>
<div id="app">
<p>學歷：
<select name="" id="" v-model="xueli">
<option value="本科">本科</option>
<option value="碩士">碩士</option>
<option value="博士">博士</option>
<option value="博士后">博士后</option>
</select>
</p>
<p>{{xueli}}</p>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
xueli:"本科"
}
})
</script>
</body>
</html>結果：
這里介紹幾個雙向綁定的數據修飾符。
1、lazy
默認情況下， v-model在每次innut事件觸發后將輸入框的值與數據進行同步;添加lazy后，只有在enter和輸入框（失焦點）的時候，數據才能實現同步。
2、number
如果要將用戶的輸入值自動地轉為數字類型，可以給 v-model添加.number修飾但v-model.number 只能輸入數字
3、trim
如果要自動地過濾用戶輸入的首尾空白字符，可以給 v-model添加.trim 修飾符,V-model.trim可以去除前后空格。
我們還還還是通過代碼實例來簡單的了解一下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>數據雙向綁定</title>
</head>
<body>
<div id="app">
<h2>1、數據：{{val1}}</h2>
<input type="text" v-model.lazy="val1">
<h2>2、數據：{{val2}}</h2>
<input type="text" v-model.number="val2">
<h2>3、數據：{{val3}}</h2>
<input type="text" v-model.trim="val3">
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var m = {
val1:1,
val2:2,
val3:''
};
var vm = new Vue({
el:'#app',
data:m,
})
</script>
</body>
</html>運行結果：
在第一個框輸入數據的時候，輸入框的值和數據因為沒有數據和它進行同步顯示，所以當光標移到第二個框的時候，第一個框就會引起失焦，這個時候就可以顯示出原本輸入的文字，因為lazy只有在enter和失焦的時候，數據才能進行同步；在第二個框每次輸入輸入一個數值就可以同步顯示；第三個先是輸入幾個空格，然后在輸入數值，只有數值才能同步，而輸入的空格就會唄忽視掉，因為trim可以去除前后空格。
關于“Vue數據雙向綁定如何實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
