Vue计算属性Computed传参

这篇具有很好参考价值的文章主要介绍了Vue计算属性Computed传参。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

关于computed计算属性传参的问题,因为computed是计算属性,如果给conputed传参则会直接报错,并且报computed is not function。

解决办法:

方法一:

通过返回函数来进行传参:

代码:

computed:{    
        ...mapState(['tableData']),
        checkDate:()=>{
            let nowTime = new Date()
            let year = nowTime.getFullYear()
            return (obj)=>(obj.time == year ? true:false)
        }
    },

分析:

既然计算属性不能做函数一样进行传参,但是computed有一个return我们可以利用起来,所以我们直接返回一个函数,这样就可以解决computed属性不能传参的问题。

方法二:

还有一种解决computed属性不能传参的办法就是将computed中的方法写道menthods中。

实例:

这是一个后台管理系统中的一个小功能:假如当天的日期和用户的生日相同时,自动将用户的生日进行东台渲染,以达到提示的意义。

用户组件代码:

HTML使用的是elementUI框架

扩展:

在这里使用了插槽的知识点,因为要将年龄进行传参,需要获取当前行的数据,所以使用插槽‘’slot-scope=‘’‘’

HTML代码

<template>
  <div>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="编号" width="240"></el-table-column>
    <el-table-column prop="name" label="姓名" width="220">
        <template slot-scope="scoped">
            <span @click='changeEdit(scoped.row)'  v-if="!scoped.row.edit">{{ scoped.row.name }}</span>
            <el-input @blur="changeName(scoped.row)" v-model="userName" v-else placeholder="请输入用户名"></el-input>
        </template>
    </el-table-column>
    <el-table-column prop="age" label="年龄">
        <template slot-scope="scoped">
            <span v-if="scoped.row.age<=30">青年</span>
            <span v-else-if="scoped.row.age<=60">中年</span>
            <span v-else>老年</span>
            <span></span>
            </template>
    </el-table-column>
    <el-table-column prop="dept" label="部门"></el-table-column>
    <el-table-column prop="bir" label="学科">
        <template slot-scope="scoped">
            <span :class="{mycolor:checkDate(scoped.row)}">{{ scoped.row.bir }}</span>
        </template>
    </el-table-column>
    <el-table-column prop="time" label="入职月份">
    </el-table-column>
  </el-table>
  
  </div>
</template>

JS代码:

其中在代码中,使用了辅助函数来获取子仓库的值

这里有关于Vuex的知识点:

  1. 命名空间

  1. 辅助函数

  1. 子仓库


<script>
//只能获取主仓库数据,无法获取子仓库数据
// import {mapState} from 'vuex'
import {createNamespacedHelpers} from 'vuex' //可以帮助从指定命名空间寻找数据
const {mapState,mapMutations} = createNamespacedHelpers('userModules')
export default {
    data(){
        return {
            userName:'',
            nowTime:new Date(),
        }
    },
    methods:{
        ...mapMutations(['changeTableData']),
        changeEdit(obj){
            obj.edit = true
            this.userName = obj.name
        },
        changeName(obj){
            obj.edit = false
            obj.name = this.userName
           this.changeTableData(obj)
        }
    },
    computed:{    
        ...mapState(['tableData']),
        checkDate:()=>{
            let nowTime = new Date()
            let year = nowTime.getFullYear()
            return (obj)=>(obj.time == year ? true:false)
        }
    },
};
</script>

<style scoped>
.mycolor{
    color:tomato
}
</style>
子仓库中用户的代码:
export default {
    //开启命名空间,默认会将文件名作为仓库名字
    namespaced:true,
    state:{
        tableData:[
            {
                id: 1,
                name: '王小虎',
                age: '17',
                dept:'土木工程',
                bir:'理工科',
                time:2024,
                edit:false  
            }
        ]
    },
    mutations:{
        changeTableData(state,obj){
            console.log(obj);
          const result = state.tableData.find(item=>item.id == obj.id)
          result.name = obj.name
        }
    },
    actions:{

    },

}
computed 参数,vue.js,javascript,前端,Powered by 金山文档
computed 参数,vue.js,javascript,前端,Powered by 金山文档

渲染成功文章来源地址https://www.toymoban.com/news/detail-599225.html

到了这里,关于Vue计算属性Computed传参的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3-computed计算属性!!!

    1.计算属性具有缓存特性,在computed中的响应式数据不发生变化时,就不重新加载computed中的逻辑。(作用于大量耗时的逻辑解构,并为其数据不经常发生变化,可采取computed计算属性提高程序效率--常用于购物车数据计算) 代码如下:  通过F12检测数据变化:

    2024年02月05日
    浏览(48)
  • vue全家桶进阶之路33:Vue3 计算属性computed

    在Vue3中,计算属性可以使用 computed 函数来定义。 computed 函数接受两个参数:第一个参数是一个函数,该函数返回计算属性的值;第二个参数是一个可选的配置对象,可以包含getter和setter函数,以及控制计算属性缓存的缓存配置。 Vue3中的计算属性与Vue2中的计算属性相比有以

    2023年04月18日
    浏览(44)
  • 【源码系列#03】Vue3计算属性原理(Computed)

    专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核💪推荐🙌 欢迎各位ITer关注点赞收藏🌸🌸🌸 传入一个 getter 函数,返回一个默认不可手动修改的 ref 对象 或者传入一个拥有 get 和 set 函数的对象,创建一个可手动修改的计算状态 @issue1 compute

    2024年02月05日
    浏览(52)
  • Vue3前端开发,computed计算属性的基础练习

    Vue3前端开发,computed计算属性的基础练习! 在新版里面,和传统的vue2一样,计算属性,都是对一些数据运算进行了封装操作。返回结果是一个实时监控的效果。区别在于,写法不同。效果是一样。 下面给大家展示一个简单的案例。 如图,自定义一个组件,ComputedDemo.vue。里

    2024年01月18日
    浏览(48)
  • vue3 源码解析(3)— computed 计算属性的实现

    本文是 vue3 源码分析系列的第三篇文章,主要介绍 vue3 computed 原理。computed 是 vue3 的一个特性,可以根据其他响应式数据创建响应式的计算属性。计算属性的值会根据依赖的数据变化而自动更新,而且具有缓存机制,提高了性能。在这篇文章中,我们将深入探讨 computed 的实现

    2024年01月16日
    浏览(48)
  • Vue3的computed计算属性和watch监视(四)

    监视【ref】定义的【基本数据】类型 监视【ref】定义的【对象类型】数据 监视【reactive】定义的【对象类型】数据  与 场景二 不同的是,newVal和oldVal是一样的,表明通过Object.assign重新赋值的时候,并不是生成一个新的对象,而是新的值覆盖了旧值 监视【ref】或者【reactiv

    2024年02月21日
    浏览(44)
  • 【vue2】计算属性(computed)与侦听器(watch)详解

    🥳博       主: 初映CY的前说(前端领域) 🌞个人信条: 想要变成得到,中间还有做到! 🤘本文核心: 计算属性与侦听属性的用法 目录( 文末有给大家准备好的Xmind思维导图 ) 一、计算属性computed ①默认get()方法,仅是获取值 ②不仅仅是获取值,还具有修改属性功能

    2024年01月16日
    浏览(50)
  • 前端Vue入门-day02-vue指令、computed计算属性与watch侦听器

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 指令补充 指令修饰符 v-bind 对于样式控制的增强  操作class 案例:京东秒杀 tab 导航高亮 操作style  v-model 应用于其他表单元素  computed 计算属性 基础语法 computed 计算属

    2024年02月11日
    浏览(42)
  • Vue3 计算属性和侦听器实战(computed、watch)——简易点餐页面

    这篇文章记录一下 Vue3 计算属性和侦听器 (computed、watch) 实战的内容,这篇文章我们在有计算属性和侦听器的基础上,我们来制作一个简易点餐页面,接下来我们一起来从零到一开始制作。 计算属性和侦听器相关文章推荐: 深入与浅谈 Vue 中计算属性和侦听器的区别和使用

    2024年02月09日
    浏览(98)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包