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

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

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

準(zhǔn)備工作

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

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)備一個(gè)容器 -->
    <div id="root">
      
    </div>
    <script type="text/javascript">
        // 設(shè)置為 false 以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。
        Vue.config.productionTip = false
      
    </script>
</body>

</html>

簡單寫一個(gè)輸入框綁定

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

</html>

頁面長這樣

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

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

因?yàn)関-bind是單向綁定的，想要實(shí)現(xiàn)這個(gè)功能，我們需要使用雙向綁定 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)備一個(gè)容器 -->
    <div id="root">
        單項(xiàng)數(shù)據(jù)綁定：<input type="text" v-bind:value="name"><br>
        雙項(xiàng)數(shù)據(jù)綁定：<input type="text" v-model:value="name">
    </div>
    <script type="text/javascript">
        // 設(shè)置為 false 以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'vue你好！'
            }
        })
    </script>
</body>

</html>

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

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

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

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

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

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

</html>

總結(jié)

Vue中有兩種綁定方式

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

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

備注：

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

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

單向雙向綁定簡寫如下

<!-- 簡寫 -->
單項(xiàng)數(shù)據(jù)綁定：<input type="text" :value="name"><br>
雙項(xiàng)數(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)備一個(gè)容器 -->
    <div id="root">
        <!-- 單項(xiàng)數(shù)據(jù)綁定：<input type="text" v-bind:value="name"><br>
        雙項(xiàng)數(shù)據(jù)綁定：<input type="text" v-model:value="name"> -->

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

</html>

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

您可能感興趣的文章: