Vue 學習筆記2 data資料物件
阿新 • • 發佈:2020-08-18
知識點
- 支援三種類型:變數、陣列、物件,訪問方式與JavaScript語法相同。
完整程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lesson 2 data 資料物件</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <span>{{info.name}}</span> <span>{{info.age}}</span> <ul> <li>{{list[0]}}</li> <li>{{list[1]}}</li> <li>{{list[2]}}</li> <li>{{list[3]}}</li> </ul> </div> <script> let tmp = new Vue({ el: "#app", data: { "message": "Hello Vue", "info": { name: "Vue", age: 18 }, "list": ["tencent", "alibaba", "baidu", "netease"] } }) </script> </body> </html>