vue计算属性想要传入参数如何解决
更新时间：2023年01月20日 09:26:01 作者：lyzz1314
这篇文章主要介绍了vue计算属性想要传入参数如何解决问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue计算属性想要传入参数怎么办
先讲解决方案
可以通过return 一个function来实现，在function中传入想要传给computed属性的参数
<q-icon :name="getIcon(item.icon,index+1)" style="font-size:2em" @click="btnClicked(index+1)"/>
computed:{
getIcon: function(){
return function(iconName, tabIndex){
return `${this.tabNum===tabIndex ? '' : 'o_'}${iconName}`;
}
},
...mapState({
showSearchFriendDialog: 'showSearchFriendDialog',
showChangeAvatarDialog: 'showChangeAvatarDialog',
showCreateGroupDialog: 'showCreateGroupDialog',
user: 'user'
})
},再讲一下我遇到的问题
vue的v-bind属性传入一个computed函数，当该函数带有参数的时候， 浏览器报错，当不带有参数的时候正常执行
下面这样解决
vue计算属性computed使用注意事项(有缓存)
当我们在模板中来显示一份经过对数据项进行复杂计算之后的结果时，我们有两种解决方案：
(1) 计算属性
(2) 函数
应该如何选择？
(1)methods定义函数，如果在模板中使用，每使用一次，就相当于调用了一次，处理逻辑会重新执行。
(2)computed定义计算属性，如果在模板中使用，使用多次，但是如果依赖的数据不发生改变，计算属性对应的函数不会重新执行。
(3)计算属性会做缓存，提高渲染的性能。
结论：
计算属性有缓存，提高渲染性能。
如果在页面上需要用到 对现有的数据进行加工得到新数据，则时要使用计算属性
想要给计算属性赋值, 则需要使用set方法
注意事项：计算属性和data一样,都需要设置return,当没有输出结果时,需要排查是不是return漏掉了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue3的介绍和两种创建方式(cli和vite),vue3对比vue2带来的性能提升有很多优势，总体来说Vue 3在性能、开发体验和代码组织方面都有所改进，使得它更加适合于大型、复杂的应用程序开发，需要的朋友可以参考下2023-04-04
在项目开发中经常需要处理重复点击导致多次调用接口的问题,这篇文章主要介绍了项目中如何使用axios过滤多次重复请求的相关资料,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了vue中动态select的使用方法,结合实例形式分析了vue.js使用动态select创建下拉菜单相关实现技巧与操作注意事项,需要的朋友可以参考下2019-10-10
本篇文章通过实例给大家分享了vue自动化表单的操作方法以及相关的代码做了描述，有兴趣的朋友可以跟着学习下。2018-05-05
这篇文章主要介绍了vue里的axios如何获取本地json数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
在现代Web应用中，PDF文档的使用非常普遍，因为它可以在各种设备和操作系统上保持一致的外观和格式，本文我们就来探讨一下如何在Vue.js应用中使用vue-pdf库嵌入PDF文档吧2023-08-08
这篇文章主要介绍了vue项目通过命令行传参实现多环境配置(基于@vue/cli)的相关资料,需要的朋友可以参考下2018-07-07
这篇文章主要为大家介绍了Vue3中Vuex状态管理学习实战示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了vue2.0 常用的 UI 库实例讲解，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-12-12
Laravel 如何在blade文件中使用Vue组件的示例代码
这篇文章主要介绍了Laravel 如何在blade文件中使用Vue组件,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
最新评论