vue中data里面的数据相互使用方式


Posted in Vue.js onJune 05, 2022

data里面的数据相互使用

今天在写代码的时候,遇到一个问题,我想使用data里面的一个对象使用data里面的某个数据,附图片:

vue中data里面的数据相互使用方式

我想让active的值给params对象里面的topicListType使用,我不想直接在一个方法里面改变这个值(想改的话就直接可以改了,太简单),所以就有了这个想法。

在data里面使用,但是肯定不能写成 this.params.topicListType: this.active,这样会报错undefined,从网上查内容基本上都一样,也许是我看不懂,也许是我不会使用别人的,都不能用,我就自己鼓捣一会,他们使用的是mounted,但是我觉得得使用computed

具体代码如下

computed: {
  computedTabsActive() {
    return this.params.topicListType = this.active;
  },
},

这样就可以了,自己亲测有效,在vue中,computed的属性可以被视为是data一样,是可以读取和设值的,所以你可以直接赋值,返回。

但是很重要的一点,必须在模板中使用。摁,在模板中不让看见的话,我想大家都会把,用v-show或者v-if都可以。也算是投机取巧把。

data里的数据不能相互引用问题

如下图所示

vue中data里面的数据相互使用方式

如果需要相互引用,需要使用computed

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。


Tags in this post...

Vue.js 相关文章推荐
详解vue 组件注册
Nov 20 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 #Vue.js
vue实现在data里引入相对路径
Jun 05 #Vue.js
ant design vue的form表单取值方法
Jun 01 #Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 #Vue.js
vue实现登陆页面开发实践
May 30 #Vue.js
vue router 动态路由清除方式
May 25 #Vue.js
vue如何清除浏览器历史栈
May 25 #Vue.js
You might like
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
koa router 多文件引入的方法示例
2019/05/22 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
使用PDB简单调试Python程序简明指南
2015/04/25 Python
django批量导入xml数据
2016/10/16 Python
详解python之配置日志的几种方式
2017/05/22 Python
详解Python进程间通信之命名管道
2017/08/28 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
详解python算法之冒泡排序
2019/03/05 Python
基于python实现学生信息管理系统
2019/11/22 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
简单说说tomcat的配置
2013/05/28 面试题
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
英语专业毕业生自荐信
2013/10/28 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
捐款感谢信
2015/01/20 职场文书
小学教师自我评价
2015/03/04 职场文书
道歉短信大全
2015/05/12 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
使用python绘制分组对比柱状图
2022/04/21 Python
HttpClient实现表单提交上传文件
2022/08/14 Java/Android