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没变

Vue11 vue的data中属性的值(基础数据类型和对象)的更多相关文章

  1. vue 需求 data中的数据之间的调用

    我遇到过这种情况  就是在我的data中 会有数据调用data中的其他数据 如图  我的alertInfoType需要拿到screeningCondition中type的值 用过vue的都知道 我是不 ...

  2. [ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html] 一. ...

  3. Python 类中__init__()方法中的形参与如何修改类中属性的值

    一.__init__()方法 如果__init__()方法为 class Cat(): def __init__(self,num) : self.num=num Python中类的__init__( ...

  4. java：Hibernate框架1（环境搭建，Hibernate.cfg.xml中属性含义，Hibernate常用API对象，HibernteUitl，对象生命周期图，数据对象的三种状态，增删查改）

    1.环境搭建: 三个准备+7个步骤 准备1:新建项目并添加hibernate依赖的jar文件  准备2:在classpath下(src目录下)新建hibernate的配置文件:hibernate.cf ...

  5. 在checkbox中使用.prop; angular中属性的值使用变量问题

    1.在checkbox中使用.prop而不使用.attr ,.attr有时并不如愿的改变checkbox的打钩问题 给这个checkbox设置return  false就能阻止点击则改变状态的默认行为 ...

  6. vue之store中属性更新用法

    //1.首先定义store对象下的属性 state: { data:'测试数据' } // 2.定义更改data数据的方法 mutations: { updatedata(state, p) { st ...

  7. react中属性默认值是true?

    看到项目代码中 return ( <MyWebView state="Login" title="登录app" ref="login" ...

  8. vue 初始化data中的数据

    Object.assign(this.$data, this.$options.data());

  9. C# 获取类中属性注释值

    转 http://bbs.csdn.net/topics/350019800 PropertyInfo[] peroperties = typeof(TEST).GetProperties(Bindi ...

  10. vue 重置data中表单form的值 重置变量

    export default { data() { return { form:{ name:"张三", age:13, sex:1, address:"" } ...

随机推荐

  1. 关于li标签的相关css属性

    1.让li前面的序号变成空心圆 list-style-type: circle;   2.让li前面的序号在div里面 list-style-position: inside;   3.改变li前面的 ...

  2. I Love Big Numbers !(高精度）

    题目链接 题意: 多组数据输入也就是C++中的: int n; while (cin >> n) { 代码块 } 对于每个数据输出其阶乘的各位上的数字之和.大眼一看,没有思路,那就百度把. ...

  3. iOS逆向之某多多App抓包

    阅读此文档的过程中遇到任何问题,请关注公众号[移动端Android和iOS开发技术分享]或加QQ群[309580013] 1.目标 由于某多多App现使用longlink进行数据传输,使用charle ...

  4. 记一次InputStream流读取不完整留下的惨痛教训

    前言 首先,问问大家下面这段流读取的代码是否存在问题呢? inputStream = .... try { // 根据inputStream的长度创建字节数组 byte[] arrayOfByte = ...

  5. 使用echarts(可视化图表库)

    一:echarts 1.简介 一个基于 JavaScript 的开源可视化图表库 echarts官网使用教程: https://echarts.apache.org/zh/index.html 2.e ...

  6. Django框架路由层-无名有名分组-无名有名分组反向解析

    目录 一:路由层 1.路由匹配(错误演示) 2.路由匹配错误原因 3.路由匹配(解决方式1) 4.settings配置文件控制自动添加斜杠匹配 5.url方法第一个参数是正则表达式(正规使用url) ...

  7. formly-form 动态表单

    动态表单库 https://github.com/ngx-formly/ngx-formly 安装 ng add @ngx-formly/schematics --ui-theme=ng-zorro- ...

  8. MAUI新生4.6-主题设置LightTheme&DarkTheme

    通过主题设置,可以在运行时更改应用的主题外观,比如切换亮色主题和暗黑主题.主题设置并没有新的知识点,基本的原理如下: 定义每个应用主题的ResourceDictionary,每个ResourceDic ...

  9. JAVA中使用最广泛的本地缓存？Ehcache的自信从何而来2 —— Ehcache的各种项目集成与使用初体验

    大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 在上一篇文章<JAVA中使用最广 ...

  10. Linux利用crontab执行定时任务

    Linux利用crontab执行定时任务 crond简介 crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认 ...