快捷導(dǎo)航

vue單向以及雙向數(shù)據(jù)綁定方式(v-bind和v-model的使用)

更新時間：2023年04月23日 09:37:44 作者：小花皮豬

這篇文章主要介紹了vue單向以及雙向數(shù)據(jù)綁定方式(v-bind和v-model的使用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

準(zhǔn)備工作

首先還是創(chuàng)建一個新的頁面寫入基本代碼

v-bind單向綁定

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 準(zhǔn)備一個容器 -->
    <div id="root">
      
    </div>
    <script type="text/javascript">
        // 設(shè)置為 false 以阻止 vue 在啟動時生成生產(chǎn)提示。
        Vue.config.productionTip = false
      
    </script>
</body>

</html>

簡單寫一個輸入框綁定

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 準(zhǔn)備一個容器 -->
    <div id="root">
        單項數(shù)據(jù)綁定：<input type="text" :value="name">
    </div>
    <script type="text/javascript">
        // 設(shè)置為 false 以阻止 vue 在啟動時生成生產(chǎn)提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'vue你好！'
            }
        })
    </script>
</body>

</html>

頁面長這樣

此時我們打開vue開發(fā)工具，動態(tài)修改name的值,發(fā)現(xiàn)頁面的值變了

但是如果我們修改輸入框的值，開發(fā)工具里面的name不會隨著輸入框改變

因為v-bind是單向綁定的，想要實現(xiàn)這個功能，我們需要使用雙向綁定 v-model

v-model雙向綁定

 <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 準(zhǔn)備一個容器 -->
    <div id="root">
        單項數(shù)據(jù)綁定：<input type="text" v-bind:value="name"><br>
        雙項數(shù)據(jù)綁定：<input type="text" v-model:value="name">
    </div>
    <script type="text/javascript">
        // 設(shè)置為 false 以阻止 vue 在啟動時生成生產(chǎn)提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'vue你好！'
            }
        })
    </script>
</body>

</html>

通過頁面我們可以發(fā)現(xiàn)，我們輸入框會帶著下面的開發(fā)工具的值一起改變

既然雙向綁定這么厲害,那么我們是不是可以放棄單向綁定，一直使用雙向綁定呢？

當(dāng)然是不可以的，我們再看一個例子

首先是單向綁定，沒有任何問題

然后是雙向綁定，發(fā)現(xiàn)x已經(jīng)丟了，并且控制臺報錯了

模板編譯失敗，v-model不支持這種類型

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 準(zhǔn)備一個容器 -->
    <div id="root">
        單項數(shù)據(jù)綁定：<input type="text" v-bind:value="name"><br>
        雙項數(shù)據(jù)綁定：<input type="text" v-model:value="name">
        <!-- 如下代碼是錯誤的，因為v-model只能應(yīng)用在表單(輸入類)元素上 必須要有value值 -->
        <h2 v-model:x="name">你好??！</h2>
    </div>
    <script type="text/javascript">
        // 設(shè)置為 false 以阻止 vue 在啟動時生成生產(chǎn)提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'vue你好！'
            }
        })
    </script>
</body>

</html>

總結(jié)

Vue中有兩種綁定方式

1 單項綁定(v-bind):數(shù)據(jù)只能從data流向頁面,可以簡寫為:

2 雙項綁定(v-model):數(shù)據(jù)不能能從data流向頁面，還可以從頁面流向data

備注：

1雙向綁定一般都應(yīng)用在表單類元素上(比如input,select,radio等)

2 v-model:value可以簡寫v-model,因為v-model默認(rèn)收集的就是value值

單向雙向綁定簡寫如下

<!-- 簡寫 -->
單項數(shù)據(jù)綁定：<input type="text" :value="name"><br>
雙項數(shù)據(jù)綁定：<input type="text" v-model="name">

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
    <!-- 引入vue.js -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 準(zhǔn)備一個容器 -->
    <div id="root">
        <!-- 單項數(shù)據(jù)綁定：<input type="text" v-bind:value="name"><br>
        雙項數(shù)據(jù)綁定：<input type="text" v-model:value="name"> -->

        <!-- 簡寫 -->
        單項數(shù)據(jù)綁定：<input type="text" :value="name"><br>
        雙項數(shù)據(jù)綁定：<input type="text" v-model="name">
        <!-- 如下代碼是錯誤的，因為v-model只能應(yīng)用在表單(輸入類)元素上 必須要有value值 -->
        <!-- <h2 v-model:x="name">你好啊！</h2> -->
    </div>
    <script type="text/javascript">
        // 設(shè)置為 false 以阻止 vue 在啟動時生成生產(chǎn)提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'vue你好！'
            }
        })
    </script>
</body>

</html>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: