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 26 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue @click.native 绑定原生点击事件
Apr 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
php 阴历-农历-转换类代码
2012/01/16 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
js中的reduce()函数讲解
2019/01/18 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
Python中的exec、eval使用实例
2014/09/23 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
致全体运动员广播稿
2014/02/01 职场文书
学生安全教育材料
2014/02/14 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
派出所所长先进事迹
2014/05/19 职场文书
社会公德演讲稿
2014/05/20 职场文书
大学生交通专业求职信
2014/09/01 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python
go goroutine 怎样进行错误处理
2021/07/16 Golang