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中音频wavesurfer.js的使用方法
Feb 20 Vue.js
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
关于Vue中的options选项
Mar 22 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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
django model通过字典更新数据实例
2020/04/01 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
物业工作计划书
2014/01/10 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
校园标语大全
2014/06/19 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2014年小学数学教师工作总结
2014/12/03 职场文书
财政局长个人总结
2015/03/04 职场文书
市场督导岗位职责
2015/04/10 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS