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 24 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
vue如何在data中引入图片的正确路径
Jun 05 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
PHP 和 MySQL 基础教程(四)
2006/10/09 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
javascript 特殊字符串
2009/02/25 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
python matplotlib中文显示参数设置解析
2017/12/15 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
Python原始套接字编程实例解析
2020/01/29 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
linux面试题参考答案(5)
2016/11/05 面试题
有个性的自我评价范文
2013/11/15 职场文书
数学教学随笔感言
2014/02/17 职场文书
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
奥利奥广告词
2014/03/20 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
英语演讲稿3分钟
2014/04/29 职场文书
节能宣传周活动总结
2014/05/08 职场文书
环保专项行动方案
2014/05/12 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
志愿者事迹材料
2014/12/26 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
nginx共享内存的机制详解
2022/03/21 Servers