參考書籍《Vue.js快跑：構建觸手可及的高效能Web應用》第1章 Vue.js基礎--雙向資料繫結
阿新 • • 發佈：2021-06-17
不能使用v-bind:value——使用v-bind只會在inputValue值變化時才更新輸入框的值，反過來則不行。作為替代，可以使用v-model指令，它作用於輸入框元素，將輸入框的值繫結到data物件的對應屬性上，因此輸入框不但會接收data上的初始值，而且當輸入內容更新時，data上的屬性值也會更新。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"content> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>資料的雙向繫結</title> </head> <body> <div id="app"> <div>{{inputValue}}</div> v-model：<input type="text" v-model="inputValue"><br> v-bind： <inputtype="text" v-bind:value="inputValue"> </div> <script src="https://unpkg.com/vue"></script> <script> new Vue({ el: "#app", data: { inputValue: "我是預設值" } }) </script> </body> </html>