快捷導(dǎo)航

Vue數(shù)據(jù)雙向綁定的實現(xiàn)方式講解

更新時間：2022年08月29日 16:08:35 作者：丘比特懲罰陸

Vue數(shù)據(jù)雙向綁定原理：Vue內(nèi)部通過Object.defineProperty方法屬性攔截的方式，把data對象里每個數(shù)據(jù)的讀寫轉(zhuǎn)化成getter/setter，當數(shù)據(jù)變化時通知視圖更新

前言

在web開發(fā)應(yīng)用中，很多項目都會用到表格一列的組件進行數(shù)據(jù)的傳輸、獲取和提交，在開發(fā)使用中，表格類組件數(shù)據(jù)的傳輸，我們一般可以使用v-model將輸入的數(shù)據(jù)同步到data屬性中，這個指令可以為不同的輸入元素使用不同的屬性，這個指令一般在form表單中的input等等元素上面來創(chuàng)建雙向的數(shù)據(jù)綁定。

一、input和textarea

在vue實戰(zhàn)項目中，vue里面的data屬性可以和input、textarea元素進行數(shù)據(jù)綁定。簡單的解釋就是比如input這個事件被觸發(fā)的時候，value里面的數(shù)據(jù)就可以將數(shù)據(jù)聽不到Script里面的data數(shù)據(jù)中；當綁定的data數(shù)據(jù)發(fā)生改變的時候，也會實時的同步到value當中，從而就可以實現(xiàn)雙向數(shù)據(jù)綁定。

我們可以通過代碼進行驗證，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>數(shù)據(jù)雙向綁定</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>

運行結(jié)果：

二、radio和CheckBox

在vue實戰(zhàn)中，這兩個元素也和input和textarea元素一樣，都是和data屬性一樣，選擇數(shù)據(jù)綁定，而且CheckBox就是多選元素，可以選擇多個value，可以在data里面使用一個數(shù)組進行綁定。只要change事件得到觸發(fā)，value屬性可以同步到data里面；當綁定vue里面的數(shù)據(jù)改變的時候，就會同步到check里面，從而實現(xiàn)數(shù)據(jù)的雙向綁定。我們還是通過簡單的代碼實例來看一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>數(shù)據(jù)雙向綁定</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>練習(xí)生與否：
    <input type="checkbox" v-model="userinfo.lianxisheng" value="練習(xí)生">
</p>
<p>性別：{{userinfo.sex}}</p>
<p>愛好：{{userinfo.hobby}}</p>
<p>練習(xí)生與否：{{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

select元素也是使用了value屬性和vue里面的data屬性進行屬性綁定，當change事件觸發(fā)的時候，value的值就會同步到vue里面的數(shù)據(jù)，當綁定的vue數(shù)據(jù)改變的時候，也會同步到value，也從而實現(xiàn)數(shù)據(jù)的雙向綁定。代碼實例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>數(shù)據(jù)雙向綁定</title>
</head>
<body>
    <div id="app">
<p>學(xué)歷：
<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>

結(jié)果：

四、雙向綁定的修飾符

這里介紹幾個雙向綁定的數(shù)據(jù)修飾符。

1、lazy

默認情況下， v-model在每次innut事件觸發(fā)后將輸入框的值與數(shù)據(jù)進行同步;添加lazy后，只有在enter和輸入框（失焦點）的時候，數(shù)據(jù)才能實現(xiàn)同步。

2、number

如果要將用戶的輸入值自動地轉(zhuǎn)為數(shù)字類型，可以給 v-model添加.number修飾但v-model.number 只能輸入數(shù)字

3、trim

如果要自動地過濾用戶輸入的首尾空白字符，可以給 v-model添加.trim 修飾符,V-model.trim可以去除前后空格。

我們還還還是通過代碼實例來簡單的了解一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>數(shù)據(jù)雙向綁定</title>
</head>
<body>
    <div id="app">
<h1>1、數(shù)據(jù)：{{val1}}</h1>
<input type="text" v-model.lazy="val1">
<h1>2、數(shù)據(jù)：{{val2}}</h1>
<input type="text" v-model.number="val2">
<h1>3、數(shù)據(jù)：{{val3}}</h1>
<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>

運行結(jié)果：

在第一個框輸入數(shù)據(jù)的時候，輸入框的值和數(shù)據(jù)因為沒有數(shù)據(jù)和它進行同步顯示，所以當光標移到第二個框的時候，第一個框就會引起失焦，這個時候就可以顯示出原本輸入的文字，因為lazy只有在enter和失焦的時候，數(shù)據(jù)才能進行同步；在第二個框每次輸入輸入一個數(shù)值就可以同步顯示；第三個先是輸入幾個空格，然后在輸入數(shù)值，只有數(shù)值才能同步，而輸入的空格就會唄忽視掉，因為trim可以去除前后空格。

到此這篇關(guān)于Vue數(shù)據(jù)雙向綁定的實現(xiàn)方式講解的文章就介紹到這了,更多相關(guān)Vue數(shù)據(jù)雙向綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: