zoukankan      html  css  js  c++  java
  • vue之添加响应式属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <h3>
                {{user.name}},{{user.age}},{{user.phone}}
                <button @click='handlerAdd'>添加属性</button>
            </h3>
        </div>
        <script src="./vue.js"></script>
        <script>
            // Vue不能检测对象属性的添加和删除
            new Vue({
                el:"#app",
                data:{
                    user:{}
                },
                methods: {
                    handlerAdd() {
                        // Vue.$set(object,key,value)添加响应式属性
                        // this.user.age = 20;
                        // this.$set(this.user,'age',20);
                        
                        // 添加多个响应式属性
                        this.user = Object.assign({},this.user,{
                            age:20,
                            phone:98564123
                        })
                    }
                },
                created(){
                    setTimeout(() => {
                        this.user = {
                            name:"张三"
                        }
                    }, 1250);
                }
            })
        
        </script>
    </body>
    </html>
    

      

  • 相关阅读:
    3/10
    2/10
    福大软工 · 最终作业
    福大软工 · 第十二次作业
    Beta 冲刺(7/7)
    Beta 冲刺(6/7)
    Beta 冲刺(5/7)
    Beta 冲刺(4/7)
    Beta 冲刺(3/7)
    Beta 冲刺(2/7)
  • 原文地址:https://www.cnblogs.com/shannen/p/13968237.html
Copyright © 2011-2022 走看看