<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 輸入什么就會(huì)顯示什么，其實(shí)就是前端數(shù)據(jù)改變，message就會(huì)跟著改變-->
    輸入文本：<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ù)改變了前端頁(yè)面中的數(shù)據(jù)也同樣會(huì)發(fā)生改變，如下所示：

在這里插入圖片描述

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

如下所示：

在這里插入圖片描述

2、那么其它標(biāo)簽選中會(huì)不會(huì)也有這個(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、我們?cè)賮?lái)看一個(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>--請(qǐng)選擇--</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é)果：

在這里插入圖片描述

4、注意

v-model會(huì)忽略所有表單元素的value、checked、selected特性的初始值而總是將Vue 實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來(lái)源。你應(yīng)該通過(guò)JavaScript 在組件的data選項(xiàng)中聲明初始值?。?！