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. 【教程】React Native 应用中的代码混淆与安全性管理

    ​ 混淆是指对源代码进行加密.重命名等操作,以增加代码的复杂度,使其难以理解和反编译. 在React Native中,混淆可以通过以下步骤实现: 1. 将JavaScript源代码转换为基于本机平台的 ...

  2. CIO们开始将软件供应链升级为安全优先级top

    开源之所以在软件开发中大量使用的原因是它提供了经过良好测试的构建块,可以加速复杂应用程序和服务的创建.但是第三方软件组件以及包和容器的便利性同时也带来了风险--软件供应链攻击. 软件供应链攻击日益普遍 ...

  3. JAVA 获取 URL 指定参数的值

    JAVA 获取 URL 指定参数的值 @Test void regexTest() { String url = "https://www.cnblogs.com/vipsoft/p/152 ...

  4. 【开源项目推荐】——纯中文本地GPT知识库搭建项目.assets

    大家好,我是独孤风. 又到了本周的开源项目推荐.近一年多的时间,人工智能迎来了大爆发.GPT相关的大模型的发展让很多领域都发生了巨大的变化. 但是虽然GPT的自然语言识别功能异常的强大,但回答给我们的 ...

  5. Linux day4:查看文件属性信息 inode和block 硬链接和软链接 inux系统时间 虚拟机克隆 linux定时任务 paramiko模块 公钥私钥

    目录 文件属性信息 存储数据相关 inode block 访问文件原理 链接信息 硬链接 软链接 linux系统时间 虚拟机克隆 链接克隆和完整克隆 克隆之后的配置 linux定时任务 定时任务软件 ...

  6. PDF转图片-itextpdf-java源码

    提供PDF 文件转图片的工具类. 电子签章过程中存在着在网页上对签署文件进行预览.指定签署位置.文件签署等操作,由 于图片在浏览器上的兼容性和友好性优于PDF 文件,所以一般在网页上进行电子签章时,会 ...

  7. js将页面上取得的元素坐标转换为电脑屏幕坐标

    代码: <!DOCTYPE html> <html> <head> <title>计算屏幕坐标</title> <meta chars ...

  8. Cpp 值的种类划分

    本博文会介绍移动语义的形式术语和规则.并且会正式的介绍值的类别,如 lvalue.rvalue.prvalue和 xvalue,并讨论了在绑定对象引用时的作用.也会讨论移动语义不会自动传递的细节,以及 ...

  9. freeswitch的任务引擎问题与解决方案

    概述 freeswitch核心框架中有一个定时任务系统task,在开发过程中用来做一些延时操作和异步操作很方便. 我们在VOIP的呼叫流程中,经常会有一些对实时性要求没那么高的操作,或者会有阻塞流程的 ...

  10. C#设计模式12——代理模式的写法

    1. 什么是代理模式? 代理模式是一种结构型设计模式,它允许通过代理对象来控制对真实对象的访问,以提供额外的功能或控制访问权限. 2. 代理模式的作用是什么? 代理模式可以为对象提供保护代理.远程代理 ...