1.3 Vue屬性綁定和雙向數據綁定
阿新 • • 發佈：2018-11-25
src class app word 數據 rip back itl round
Vue屬性綁定和雙向數據綁定
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>屬性綁定和雙向數據綁定</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--根據慕課網DellLee老師講解的vue2.5入門課程筆記，視頻地址： https://www.imooc.com/learn/980--> <div title="this is hello world">hello world</div> </div> <div id="app1"> <!--1 屬性綁定：v-bind--> <!--1.1 屬性綁定： v-bind代表 當前這個屬性與誰綁定，是與titleData數據項綁定，一旦使用v-bind則屬性值代表的是js表達式v-bind可以縮寫為:--> <div v-bind:title="‘一旦用v-bind,這裏是JS表達式‘+titleData">hello world</div> </div> <div id="app2"> <!--1.2 屬性綁定 v-bind可以縮寫為: --> <div :title="titleData">hello world</div> </div> <div id="app3"> <!--2 雙向數據綁定:v-model --> <!--雙向數據綁定是指：當頁面中的內容發生改變，則Vue實例中的數據也發生改變--> <div :title="titleData">hello world</div> <input v-model="context" /> <div > {{context}} </div> </div> <script> var app = new Vue({ el: "#app", data: { title: "this is hello world" } }); var app1 = new Vue({ el: "#app1", data: { titleData: "this is hello wordss" } }); var app2 = new Vue({ el: "#app2", data: { titleData: "ddssss" } }); var app3 = new Vue({ el: "#app3", data: { titleData: "", context:"this is context" } }); </script> </body> </html>
1.3 Vue屬性綁定和雙向數據綁定