1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10.     <div id="app">
    11.         <h3>
    12.             {{user.name}},{{user.age}},{{user.phone}}
    13.             <button @click='handlerAdd'>添加属性</button>
    14.         </h3>
    15.     </div>
    16.     <script src="./vue.js"></script>
    17.     <script>
    18.         // Vue不能检测对象属性的添加和删除
    19.         new Vue({
    20.             el:"#app",
    21.             data:{
    22.                 user:{}
    23.             },
    24.             methods: {
    25.                 handlerAdd() {
    26.                     // Vue.$set(object,key,value)添加响应式属性
    27.                     // this.user.age = 20;
    28.                     // this.$set(this.user,'age',20);
    30.                     // 添加多个响应式属性
    31.                     this.user = Object.assign({},this.user,{
    32.                         age:18,
    33.                         qq:598779784
    34.                     })
    35.                 }
    36.             },
    37.             created(){
    38.                 setTimeout(() => {
    39.                     this.user = {
    40.                         name:"张三"
    41.                     }
    42.                 }, 1250);
    43.             }
    44.         })
    46.     </script>
    47. </body>
    48. </html>