Vue雙向繫結詳解
阿新 • • 發佈：2021-11-17
目錄
- 1、雙向繫結
- 2、那麼其它標籤選中會不會也有這個結果，答案當然是有：
- 3、我們再來看一個：
- 4、注意
- 總結
1、雙向繫結
雙向繫結就是 你們前端資料改變 你們data中的資料也會改變，同樣的，你們data中的資料改變了 前端頁面中的資料也同樣會發生改變，而且，這個過程是不需要重新整理的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 輸入什麼就會顯示什麼，其實就是前端資料改變，message就會跟著改變-->
輸入文字：<input type="text" v-model="message">{{message}}
</div>
<script src="https://cdn.delivr.net/npm/@2.5.21/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",data: {
http://www.cppcns.com
執行結果：
data中的資料改變了 前端頁面中的資料也同樣會發生改變，如下所示：
前端資料改變rMPDq 你們data中的資料也會改變
如下所示：
2、那麼其它標籤選中會不會也有這個結果，答案當然是有：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
&www.cppcns.com 執行結果：
3、我們再來看一個：
<!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/[email protected]/dist/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",data: {
select: ""
}
});
</script>
</body>
</html>
執行結果：
4、注意
v-model會忽略所有表單元素的value、checked、selected特性的初始值而總是將Vue 例項的資料作為資料來www.cppcns.com源。你應該通過 在元件的data選項中宣告初始值！！！
總結
本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!