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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 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
Symfony模板的快捷变量用法实例
2016/03/17 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
JavaScript 事件的一些重要说明
2009/10/25 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
js实现拖拽效果
2015/02/12 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
vue模块拖拽实现示例代码
2019/03/09 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
js实现3D粒子酷炫动态旋转特效
2020/09/13 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
mac下如何将python2.7改为python3
2018/07/13 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
python使用smtplib模块发送邮件
2020/12/17 Python
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
校运会广播稿100字
2014/01/27 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
二年级学生期末评语
2014/12/26 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
春季运动会加油词
2015/07/18 职场文书
vue特效之翻牌动画
2022/04/20 Vue.js