快捷導(dǎo)航

Vue雙向綁定詳解

更新時(shí)間：2021年11月15日 15:40:38 作者：咸魚_翻身

這篇文章主要介紹了Vue 實(shí)現(xiàn)雙向綁定的四種方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧，希望能夠給你帶來幫助

1、雙向綁定

雙向綁定就是你們前端數(shù)據(jù)改變你們data中的數(shù)據(jù)也會改變，同樣的，你們data中的數(shù)據(jù)改變了前端頁面中的數(shù)據(jù)也同樣會發(fā)生改變，而且，這個(gè)過程是不需要刷新的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 輸入什么就會顯示什么，其實(shí)就是前端數(shù)據(jù)改變，message就會跟著改變-->
    輸入文本：<input type="text" v-model="message">{{message}}
</div>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    });
</script>
 </body>
</html>

運(yùn)行結(jié)果：

data中的數(shù)據(jù)改變了前端頁面中的數(shù)據(jù)也同樣會發(fā)生改變，如下所示：

在這里插入圖片描述

前端數(shù)據(jù)改變你們data中的數(shù)據(jù)也會改變

如下所示：

在這里插入圖片描述

2、那么其它標(biāo)簽選中會不會也有這個(gè)結(jié)果，答案當(dāng)然是有：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    性別：
    <input type="radio" name="sex" value="男" v-model="message"> 男
    <input type="radio" name="sex" value="女" v-model="message"> 女
    <p>你的性別是：{{message}}</p>
</div>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: ""
        }
    });
</script>
 </body>
</html>

運(yùn)行結(jié)果：

在這里插入圖片描述

3、我們再來看一個(gè)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <select v-model="select">
        <option value="" disabled>--請選擇--</option>
        <option>男</option>
        <option>女</option>
    </select>
    <span>你的選擇：{{select}}</span>
</div>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            select: ""
        }
    });
</script>
 </body>
</html>

運(yùn)行結(jié)果：

在這里插入圖片描述