Vue中this.$options.data()和this.$data知多少?
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知多少?的更多相关文章
- vue 中 this.$options.data() 重置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue中之nextTick函数源码分析
Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...
- vue中router跳转本页刷新
问题: 导航栏的地址发生改变但是页面却不刷新 (用vue-router路由到当前页面,页面是不进行刷新的)解决: 1.); 2.location.reload() ...
- Vue中iframe和组件的通信
最近的项目开发中用到了Vue组件中嵌套iframe,相应的碰到了组件和HTML的通信问题,场景如下:demo.vue中嵌入 test.html 由于一般的iframe嵌套是用于HTML文件的,在vue ...
- axios在Vue中的简单应用(一)
1.安装axios: npm install --save axios vue-axios 2.安装qs: qs.stringify(data)可以解决data数据格式问题 npm install - ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- Vue中data重置问题
Object.assign() Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. 目标对象有1个,后边可以有多个源对象.注意他只会拷贝源对 ...
- vue中把props中的值赋值给data
vue中把props中的值赋值给data 2018年12月26日 14:37:11 木豆mudou 阅读数 3497 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上 ...
- Vue之vue中的data为什么是一个函数+vue中路径别名alias设置
问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...
- vue中,怎么给data对象添加新的属性?(尼玛这面试题居然让我给碰上了。。。。)
Vue中给data中的对象属性添加一个新的属性时会发生什么,如何解决? 示例: <template> <div> <ul> <li v-for="v ...
随机推荐
- LAS Spark+云原生:数据分析全新解决方案
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 随着数据规模的迅速增长和数据处理需求的不断演进,云原生架构和湖仓分析成为了现代数据处理的重要趋势.在这个数字化时代 ...
- 由浅入深,揭秘企业级OLAP数据引擎ByteHouse
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 在字节跳动各产品线飞速成长的过程中,对数据分析能力也提出了更高的要求,现有的主流数据分析产品都没办法完全满足业务要 ...
- Axure 表单元件
文本框:一条 文本域:整个区域多行 单选:指定单元按钮组
- Kubernetes(K8S) yaml 介绍
使用空格做为缩进 缩进的空格数目不重要, 只要相同层级的元素左侧对齐即可 低版本缩进时不允许使用 Tab 键, 只允许使用空格 使用#标识注释, 从这个字符一直到行尾, 都会被解释器忽略 --- 使用 ...
- 32. 干货系列从零用Rust编写正反向代理,关于堆和栈以及如何解决stack overflow
wmproxy wmproxy已用Rust实现http/https代理, socks5代理, 反向代理, 静态文件服务器,四层TCP/UDP转发,七层负载均衡,内网穿透,后续将实现websocket代 ...
- 原创内容屡屡被盗?从源头对资源盗用说NO
在这个信息化的时代,资源被盗用是一件很让人厌恶,但又很常见的事.比如,之前郭敬明的小说<梦里花落知多少>剽窃庄羽小说<圈里圈外>一事,虽然郭敬明通过个人微博向庄羽道歉,并表示& ...
- Servlet系列:两种创建方式(xml,注解)
一.使用web.xml的方式配置(Servlet2.5之前使用) 在早期版本的Java EE中,可以使用XML配置文件来定义Servlet.在web.xml文件中,可以定义Servlet的名称.类名. ...
- 传统单节点网站的 Serverless 上云
什么是函数?刚刚考完数学没多久的我,脑里立马想到的是自变量.因变量.函数值,也就是y=f(x).当然,在计算机里,函数function往往指的是一段被定义好的代码程序,我们可以通过传参调用这个定义好的 ...
- 关于 uintptr_t和intptr_t 类型
简介 最近在看代码时,发现了两个之前没见过的数据类型:intptr_t,uintptr_t.这两个数据类型是ISO C99定义的,具体代码在linux平台的/usr/include/stdint.h头 ...
- Go socket 编程源码解析(下)
在上一节中介绍了 socket 的 Listen 方法,这里进一步介绍 Accept 和 Read,Write 方法. 1. Accept Accept 的核心逻辑在于: func (ln *TCPL ...