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 ...
随机推荐
- 如何在跨平台的环境中创建可以跨平台的后台服务,它就是 Worker Service。
一.简介 最近,有一个项目要使用 Windows 服务,来做为一个软件项目的载体.我想了想,都已经到了跨平台的时代了,会不会有替换 Windows 服务的技术出现呢?于是,在网络上疯狂的搜索了一番,真 ...
- Selenium八大元素定位(元素定位,元素等待)
Selenium WebDriver查找页面元素及元素操作 元素常用方法定位方法 通过id定位元素:find_element_by_id('id_value') 通过name定位元素:find_ele ...
- Jmeter软件测试
1.1. 性能测试是什么 基于协议模拟用户发出请求,对服务器形成一定负载,来测试服务器的性能指标是否满足要求 性能指标关注点:时间性能.空间性能 性能测试与页面无关 性能测试定义:指通过自动化的测试工 ...
- 【论文笔记#1】SPGAN-DA:用于领域自适应遥感图像语义分割的语义保留生成对抗网络
作者: Yansheng Li 发表年代: 2023 使用的方法: 无监督领域自适应(UDA).GAN.ClassMix.边界增强 来源: IEEE TGRS 方向: 语义分割 期刊层次: CCF B ...
- 干掉大小流切换 I 帧!阿里云 RTC QoS 及视频编码联合优化之切流编码
如果要在两条分辨率不同的视频流之间切换,尽管这两条流的画面内容基本一样,但是由于两条流的参考帧不同,分辨率不同,目前所有的视频编码标准都无法做到利用帧间预测编码得到编解码匹配的结果,而帧内预测编码即 ...
- CNS0创建交货单没有WBS元素
1.问题 CNS0创建交货单带不出WBS,但是交货单过账之后,又可以读取到WBS. 2.原因 2.1.项目挂料 创建项目挂料时,当物料为通用料,则在网络中挂料时,采购类型为网络预留 当物料为专用料,则 ...
- 【Docker】基础原理
基础原理 基础流程 Docker镜像讲解 Docker容器讲解 创建容器的两种方式 容器创建命令详解
- CodeForces-339B-Xenia and Ringroad (循环队列,水题)
Xenia lives in a city that has n houses built along the main ringroad. The ringroad houses are numbe ...
- 全国城市地级市区县sql
全国城市地级市区县sql CREATE TABLE `region` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `title` varchar( ...
- 与奥运同行:打造智慧体育馆 3D 可视化
祝贺中国队在东京奥运会夺得金牌 38 枚.银牌 32 枚.铜牌 18 枚.中国健儿在奥运舞台上交出了一份璀璨的成绩单.用一场场精彩绝伦的比赛,演绎"更快.更高.更强.更团结"的奥林 ...