1.场所描述

如何获取vue-data中的所有值?
如何获取vue-data中的某一个值?
如何获取vue-data中的初始值?
如何设置data中的值位初始值?

2.主角登场 this.$options.data()和this.$data

<template>
<div>
<button @click="gotos">改变</button>
<button @click="obtain">获取改变后的值</button>
<button @click="inithander">获取初始状态下的值</button>
<button @click="reset">重置</button>
</div>
</template>
<script>
export default {
data(){
return{
// https://www.jianshu.com/p/05697682a46f
obj:{
name:'张三',
age:'李四',
sex:'男'
},
subjective:{
info:'ok'
}
}
},
methods:{
gotos(){
this.obj.sex='我改变了性别'
},
//获取vue中data中的所有值 当然data中的值也有可能是被改变了的
obtain(){
console.log('vue中data中的所有值',this.$data);
},
// 获取组件下初始状态下的值;就是你在data中最初写的值
inithander(){
console.log('初始状态下的值',this.$options.data());
},
// 重置值
reset(){
Object.assign(this.$data.obj,{name:'',age:'', sex:''});
// 还可以使用 Object.assign(this.$data.obj,this.$options.data().obj); //前提是obj的值是空
console.log('重置', this.obj )
}
}
}
</script>

Vue中this.$options.data()和this.$data知多少?的更多相关文章

  1. vue 中 this.$options.data() 重置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue中之nextTick函数源码分析

    Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...

  3. vue中router跳转本页刷新

    问题:  导航栏的地址发生改变但是页面却不刷新  (用vue-router路由到当前页面,页面是不进行刷新的)解决: 1.);           2.location.reload()       ...

  4. Vue中iframe和组件的通信

    最近的项目开发中用到了Vue组件中嵌套iframe,相应的碰到了组件和HTML的通信问题,场景如下:demo.vue中嵌入 test.html 由于一般的iframe嵌套是用于HTML文件的,在vue ...

  5. axios在Vue中的简单应用(一)

    1.安装axios: npm install --save axios vue-axios 2.安装qs: qs.stringify(data)可以解决data数据格式问题 npm install - ...

  6. Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理

    基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...

  7. Vue中data重置问题

    Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 目标对象有1个,后边可以有多个源对象.注意他只会拷贝源对 ...

  8. vue中把props中的值赋值给data

    vue中把props中的值赋值给data 2018年12月26日 14:37:11 木豆mudou 阅读数 3497   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上 ...

  9. Vue之vue中的data为什么是一个函数+vue中路径别名alias设置

    问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...

  10. vue中,怎么给data对象添加新的属性?(尼玛这面试题居然让我给碰上了。。。。)

    Vue中给data中的对象属性添加一个新的属性时会发生什么,如何解决? 示例: <template> <div> <ul> <li v-for="v ...

随机推荐

  1. 字节跳动基于 Apache Hudi 的多流拼接实践方案

    字节跳动数据湖团队在实时数仓构建宽表的业务场景中,探索实践出的一种基于 Hudi Payload 的合并机制提出的全新解决方案. 字节跳动数据湖团队在实时数仓构建宽表的业务场景中,探索实践出的一种基于 ...

  2. Solon Aop 特色开发(3)构建一个Bean的三种方式

    Solon,更小.更快.更自由!本系列专门介绍Solon Aop方面的特色: <Solon Aop 特色开发(1)注入或手动获取配置> <Solon Aop 特色开发(2)注入或手动 ...

  3. Neo4j Neo.TransientError.General.MemoryPoolOutOfMemoryError

    The allocation of an extra 4.0 MiB would use more than the limit 2.0 GiB. Currently using 2.0 GiB. d ...

  4. 大数据 - DWD&DIM 行为数据

    我们前面采集的日志数据已经保存到 Kafka 中,作为日志数据的 ODS 层,从 Kafka 的ODS 层读取的日志数据分为 3 类, 页面日志.启动日志和曝光日志.这三类数据虽然都是用户行为数据,但 ...

  5. 对于 CDN 的多元理解

    这是二狗子为数不多的创业故事. 那时二狗子还是一名高中生,学校是封闭式管理.由于二狗子总忍不住上课吃零食,他便每周一都会背着一麻袋零食来上学. 这上课吃零食行为,不知不觉诱惑到了周围的同学.大家纷纷向 ...

  6. 将文件从windows格式改为linux格式

    1.使用notepad++软件转换 notepad++官方下载地址 使用notepad++打开文件---编辑---文档格式转换---转为unix---上传至linux 2.set ff vim 文件, ...

  7. AliPLC 智能丢包补偿算法,提升弱网环境的通话质量

    在线视频/语音通话逐渐成为人们日常生活的一部分,而复杂多变的网络环境会导致部分音频包无法传送到接收端,造成语音信号的短时中断或者卡顿,这会严重影响通话体验,为解决这类问题,阿里云视频云音频技术团队在综 ...

  8. 什么?你居然没有鸭鸭邮箱?@duck.com邮箱注册与使用

    @duck.com 是由专注于隐私的搜索引擎DuckDuckGo提供的面向所有人的匿名邮箱. 注册者可以设置一个自定义前缀,比如 one@duck.com,接着设置接收邮箱(如pete@gmail.c ...

  9. MyBatis(2):深入学习

    请注意,本文学习自 @我没有三颗心脏 编写日志输出环境配置文件 在开发过程中,最重要的就是在控制台查看程序输出的日志信息,在这里我们选择使用 log4j 工具来输出: 准备工作: 将[MyBatis] ...

  10. AtCoder Beginner Contest 199 游记(AB水题,C字符串操作,D搜索,E状压)

    A - Square Inequality 水题 B - Intersection 水题,就是找公共区间,维护一下 Lmax,Rmin即可 void solve() { int n, a, b; in ...