溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Vue數(shù)據(jù)雙向綁定如何實現(xiàn)

發(fā)布時間：2022-08-30 10:01:02 來源：億速云 閱讀：149 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“Vue數(shù)據(jù)雙向綁定如何實現(xiàn)”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue數(shù)據(jù)雙向綁定如何實現(xiàn)”文章能幫助大家解決問題。

前言

在web開發(fā)應(yīng)用中，很多項目都會用到表格一列的組件進(jìn)行數(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元素進(jìn)行數(shù)據(jù)綁定。簡單的解釋就是比如input這個事件被觸發(fā)的時候，value里面的數(shù)據(jù)就可以將數(shù)據(jù)聽不到Script里面的data數(shù)據(jù)中；當(dāng)綁定的data數(shù)據(jù)發(fā)生改變的時候，也會實時的同步到value當(dāng)中，從而就可以實現(xiàn)雙向數(shù)據(jù)綁定。

我們可以通過代碼進(jìn)行驗證，如下：

<!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é)果：

Vue數(shù)據(jù)雙向綁定如何實現(xiàn)

二、radio和CheckBox

在vue實戰(zhàn)中，這兩個元素也和input和textarea元素一樣，都是和data屬性一樣，選擇數(shù)據(jù)綁定，而且CheckBox就是多選元素，可以選擇多個value，可以在data里面使用一個數(shù)組進(jìn)行綁定。只要change事件得到觸發(fā)，value屬性可以同步到data里面；當(dāng)綁定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>

Vue數(shù)據(jù)雙向綁定如何實現(xiàn)

三、select

select元素也是使用了value屬性和vue里面的data屬性進(jìn)行屬性綁定，當(dāng)change事件觸發(fā)的時候，value的值就會同步到vue里面的數(shù)據(jù)，當(dāng)綁定的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é)果：

Vue數(shù)據(jù)雙向綁定如何實現(xiàn)

四、雙向綁定的修飾符

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

1、lazy

默認(rèn)情況下， v-model在每次innut事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步;添加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">
<h2>1、數(shù)據(jù)：{{val1}}</h2>
<input type="text" v-model.lazy="val1">
<h2>2、數(shù)據(jù)：{{val2}}</h2>
<input type="text" v-model.number="val2">
<h2>3、數(shù)據(jù)：{{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>

運行結(jié)果：

Vue數(shù)據(jù)雙向綁定如何實現(xiàn)

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

關(guān)于“Vue數(shù)據(jù)雙向綁定如何實現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

vue
AI
助
手