• Vue11 vue的data中属性的值(基础数据类型和对象)


    1 代码

    <body>
    
       <div id="root">
        <h1>{{name}}</h1>
        <h1>{{obj}}</h1>
    
       </div>
    
       <script type="text/javascript" >
    
        let a = {
            name:'sisi'
        }
    
        const vm = new Vue({
            el:'#root',
            data:{
                name:a.name,
                obj:a
            }
        })
    
        </script>
    
    </body>

    2 页面

    3 vm外层属性 _data属性 及vm外部变量

      1)vm外层属性和_data属性的关系

        可以看到vm外层的属性和_data里面的属性是相等的,因为外层的属性就是代理的_data的属性

      2)_data属性的值使用的是vm以外的对象的话

        值是一般数据类型:初始化的时候把值赋值给_data的属性了,后面两者可以说没有关系了

        值是对象:初始化的时候把对象地址赋值给_data的属性了

    4 测试1

      初始化的时候,值全部是'sisi'

      

       执行命令a.name='数学'

       结果:

        a对象的name属性变化了

        vm._data.obj.name 变化了,vm.obj.name变化了

        vm.name没变化,vm._data.name没变化

    5 测试2

      刷新页面,初始化的时候,值全部是'sisi'

      

      执行命令vm.name='历史'

      结果:

        vm.name变化,vm._data.name变化

        vm._data.obj.name 没变,vm.obj.name没变

        a对象的name属性没变

      

    6 测试3

      刷新页面,初始化的时候,值全部是'sisi'

      

      执行命令vm.obj.name='化学'

      结果:

        vm._data.obj.name 变了,vm.obj.name变了

        a对象的name属性变了

        vm.name没变,vm._data.name没变

  • 相关阅读:
    用vbox搭建Linux服务器
    mysql数据库两表关联查询统计同一字段不同值的个数
    2019-06-16 Java学习日记之XML&tomcat
    2019-06-15 Java学习日记之mysql多表查询
    2019-06-14 Java学习日记之SQL
    2019-06-13 Java学习日记之MySql
    XML & Tomcat
    数据库的CRUD操作
    PrepareStatement
    Dao模式(data Access Object 数据访问对象)
  • 原文地址:https://www.cnblogs.com/jthr/p/16424314.html
Copyright © 2020-2023  润新知