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 + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
vue组件是如何解析及渲染的?
Jan 13 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
Javascript 错误处理的几种方法
2009/06/13 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
mui back 返回刷新页面的实例
2017/12/06 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
Python进行数据提取的方法总结
2016/08/22 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
泰国网上购物:Shopee泰国
2018/09/14 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
书香校园建设方案
2014/05/02 职场文书
电力培训心得体会
2014/09/02 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
婚前保证书范文
2015/02/28 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
无犯罪记录证明样本
2015/06/16 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
处理canvas绘制图片模糊问题
2022/05/11 Javascript