在Vue mounted方法中使用data变量详解

如下所示：

data: {
  certificates: null
},
mounted: function () {
  var __this = this;
  __this.certificates = getDictForkey("学历");
}

使用this对data中变量进行调用

vue生命周期参照官方：点击进入

vue渲染页面的时候，可能会对某些数据进行字典操作，比方性别，数据中是0和1，字典值是男和女，这个时候就需要在mounted进行“性别”字典的获取，然后页面自动渲染。

以上这篇在Vue mounted方法中使用data变量详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue2 在mounted函数无法获取prop中的变量问题

    如下所示: props: { example: { type: Object, default() { }, }, }, watch: { example: function(newVal,oldVal){ // newVal 为改变后的值 // 继续要处理的事件 }, }, 使用watch 替代 mounted. 通过watch属性来响应数据的变化,当数据改变时执行异步操作. 总结 以上所述是小编给大家介绍的解决vue2 在mounted函数无法获取prop中的变量问题,希望对大家有所帮助,如

  • vue mounted组件的使用

    1.钩子函数 钩子函数是Windows消息处理机制的一部分,通过设置"钩子",应用程序可以在系统级对所有消息.事件进行过滤,访问在正常情况下无法访问的消息.钩子的本质是一段用以处理系统消息的程序,通过系统调用,把它挂入系统.(百度百科) 2.相对于前端来讲 对于前端来说,钩子函数就是指再所有函数执行前,我先执行了的函数,即 钩住 我感兴趣的函数,只要它执行,我就先执行. 3.vue中的mounted 在这发起后端请求,拿回数据,配合路由钩子做一些事情 类型:Function 详细: e

  • vue mounted 调用两次的完美解决办法

    在开发中发现其中一个页面moutned调用了两次,而其他页面正常,表示很懵逼,然后查找原因,终于找到了,其实归根到底是要知道mounted的调用机制问题: 情况:在这个页面中出现了mounted 加载了两次的情况: 方法:排除法 首先把 this.$store.commit() 方法注释掉,发现就好了,只加载一次 初步判断是commit  方法导致的 二  验证判断是否正确,不使用commit 方法,该用直接改变变量状态的方法,发现又加载了两次: 再次判断,不是由于commit引起的 三   猜

  • vue中created和mounted的区别浅析

    前言 关于vue.js中的生命周期,如果不是有特别的需求,一般在项目开发过程中更多的使用created和mounted, 所以在本文中主要讲解created与mounted在开发中的主要使用区别. 关于完整的生命周期,不久会在另一篇文章中做整体的理解,包括activated.destroyed等,不过可能会有点晚,大家可以留意一下 版本信息: 系统:win10 Vue:2.5.2 webpack:3.6.0 npm:6.9.0 node:10.15.3 生命周期 完整的生命周期图示为了避免占用板

  • 在Vue mounted方法中使用data变量详解

    如下所示: data: { certificates: null }, mounted: function () { var __this = this; __this.certificates = getDictForkey("学历"); } 使用this对data中变量进行调用 vue生命周期参照官方:点击进入 vue渲染页面的时候,可能会对某些数据进行字典操作,比方性别,数据中是0和1,字典值是男和女,这个时候就需要在mounted进行"性别"字典的获取,然后

  • vue整合项目中百度API示例详解

    目录 官网介绍 申请密钥 官方示例 项目实战 创建地图 获取经纬度 创建Map实例 两个坐标点之间的距离 查询地点信息 Vue项目中整合百度API获取地理位置的方法 组件中使用 vue-baidu-map 百度地图官方vue组件 官网介绍 百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口 可帮助您在网站中,构建功能丰富交互性强的地图应用 支持PC端和移动端,基于浏览器的地图应用开发,且支持HTML5特性的地图开发 官网传送门 百度地图JavaScri

  • PyTorch中的Variable变量详解

    一.了解Variable 顾名思义,Variable就是 变量 的意思.实质上也就是可以变化的量,区别于int变量,它是一种可以变化的变量,这正好就符合了反向传播,参数更新的属性. 具体来说,在pytorch中的Variable就是一个存放会变化值的地理位置,里面的值会不停发生片花,就像一个装鸡蛋的篮子,鸡蛋数会不断发生变化.那谁是里面的鸡蛋呢,自然就是pytorch中的tensor了.(也就是说,pytorch都是有tensor计算的,而tensor里面的参数都是Variable的形式).如果

  • 安装node.js以及搭建vue项目过程中遇到的问题详解

    目录 一.node.js安装 二.如何找node.js历史版本 1.点击DOWNLOADS 2.点击页面下方 3.翻页找到历史版本 三.检查是否安装成功? 四.安装成功后需要配置环境变量: 五.环境搭建 六.项目创建 总结 一.node.js安装 进入官网 https://nodejs.org/en/download/ 直接点击下载安装!安装过程直接下一步就行: 二.如何找node.js历史版本 (https://nodejs.org/en/download/) 1.点击DOWNLOADS 2.

  • C语言在头文件中定义const变量详解

    C语言在头文件中定义const变量详解 在头文件中定义const不会有多变量的警告或错误,如果该头文件被大量包含会造成rom空间的浪费. 通过查看*.i文件的展开呢,可以发现每个.i文件都会有相应的变量展开. 查看*.map文件,能查看到该变量的多个地址分配. 在预编译的时候如果在头文件定义了const变量,每一个包含该头文件的c文件都会将其展开,而在编译的时候不会报错,因为这符合语法规则,每一个包含这个头文件的*.c文件都会编译一次这个变量,分配一个新的地址,然后在链接的时候也不会报错,因为每

  • Golang常见错误之值拷贝和for循环中的单一变量详解

    前言 golang(中文名:go语言)是谷歌2009发布的第二款开源编程语言.Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全.支持并行进程..如果你想知道得更多,请移步至官网golang官网 在 Go 中函数的调用是值拷贝 copy value,而且在 for 循环中 v 的变量始终是一个变量.如果 v 是 pointer,print 这个 method 接收的是指针的拷贝,for 循环体中每次迭代 v 的 pointer va

  • Vue 中mixin 的用法详解

    说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

  • vue中的watch监听数据变化及watch中各属性的详解

    首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化.或者是data中的某个变量. 值可以是函数:就是当你监控的家伙变化时,需要执行的函数,这个函数有两个形参,第一个是当前值,第二个是变化后的值. 值也可以是函数名:不过这个函数名要用单引号来包裹. 第三种情况厉害了. 值是包括选项的对象:选项包括有三个. 1.第一个handler:其值是一个回调函数.即监听到变化时应该执行的函数. 2.第二个是deep

  • Vue中provide、inject详解以及使用教程

    目录 Vue中 常见的组件通信方式可分为三类 1. provide / inject 简介 2. provide / inject 使用方法 3. 总结 总结 传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue 2.x 官方文档 provide / inject 说明 Vue中 常见

  • vue中的scope使用详解

    我们都知道vue slot插槽可以传递任何属性或html元素,但是在调用组件的页面中我们可以使用 template scope="props"来获取插槽上的属性值,获取到的值是一个对象. 注意:scope="它可以取任意字符串"; 上面已经说了 scope获取到的是一个对象,是什么意思呢?我们先来看一个简单的demo就可以明白了~ 如下模板页面: <!DOCTYPE html> <html> <head> <title>

随机推荐