首页 > 其他分享 >Vue computed 计算属性语法

Vue computed 计算属性语法

时间:2023-08-14 20:22:32浏览次数:50  
标签:Vue return computed item const carnoColor any 属性语法

1. 不传参

import { ref, computed} from "vue";
let carnoColor = computed(()=>{ return formatterCarnoColor(model.value.carnoColor)  }) 

 

2. 传参

<div v-for="item in list">
    <div v-if='isShow(item)'>是否显示</div>
</div>
 
<script>
import {computed} from 'vue'
const currentId=ref(null)
 
const isShow=computed(()=>(item:any)=>{ //计算属性传递参数
    return currentId=== item.id
})
</script>

 

3. slot 中传计算属性

<ss-vue-calendar>
    <template #tbodyCell="scope">
        <span v-if="getCurrentDayDetailed(scope.item)">
            {{getCurrentDayDetailed(scope.item)}}
        </span>
    </template>
 </ss-vue-calendar>
 
<script lang='ts'>
    const getCurrentDayDetailed = computed(() => (item: any) => {
      return item.id==='123'
    })
</script>

 

标签:Vue,return,computed,item,const,carnoColor,any,属性语法
From: https://www.cnblogs.com/mmzuo-798/p/17629645.html

相关文章

  • React和Vue的区别,大家怎么看?
    Vue更适合小项目,React更适合大公司大项目;Vue的学习成本较低,很容易上手,但项目质量不能保证......真的是这样吗?借助本篇文章,我们来从一些方面的比较来客观的去看这个问题。 论文档的丰富性从两个方面来看这个问题:社区的支持力度及文档的完善性。 对于任何编程语......
  • vue3 使用 vue-i18n 配置多语言环境
    1.插件地址:VueI18n官方文档GitHub地址2.安装:在Vue之后引入vue-i18n,它会自动安装:<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script><scriptsrc="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>NPM:npminstallv......
  • Vuejs装饰器风格开发教程(前言、模板项目、类属性、类方法)
    教程前言AOP切面编程是面向对象开发中的一种经典的编程范式,旨在将横切关注点与核心业务逻辑分离来提高代码的模块性和可维护性。如:日志记录、事务管理等就属于横切关注点。在为H5提供Android原生支持时,曾将插件模块改造为AOP模式,实现插件的自动注册。Java领域的SpringBoo......
  • 使用vue自定义指令实现按钮权限管理
    原文链接:https://www.jianshu.com/p/f7d6b9420cee官网链接:https://v2.cn.vuejs.org/v2/guide/custom-directive.html注册全局指令Vue提供了一个directive方法给我们注册自定义指令,在main.js中注册一个全局的自定义指令。directive方法接收两个参数:指令名称、包含指令钩子函......
  • vue函数式组件
    <template>改为<templatefunctional>即可然后模板里使用到父组件参数的话,需在变量前面加上props,如<div>{{count}}</div>改为<div>{{props.count}}</div>如果组件比较简单,只是展示数据的话,可以使用函数式组件,函数式组件没有生命周期(beforeCreated、beforeDestroy),可提升......
  • vuex辅助函数使用
    一:mapState的使用此函数返回一个对象,生成计算属性-当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。mapState可以声明多个需要在组件中引入:需要在组件中引入:import{mapState}from'vuex'...mapState({/......
  • vue语法错误 + Promise错误 + js 错误,通过钉钉报警
      一、背景:为了使系统更加稳定,在用户使用期间,若发现异常,可及时应对,采取了“报警机制”。通常“报警机制”分为2种,一种是后端对api监控及自定义监控,出现异常,通过钉钉或邮件的形式通知,第二种是前端对js语法,vue语法,自定义报错进行监控,以此来规范代码质量,保证系统预警二、流程......
  • vue.use()详解
    原文链接:https://blog.csdn.net/sunyctf/article/details/127706967官网解释:前言:相信很多人在用Vue使用别人的组件时,会在在main.js中用到Vue.use(xx)。例如:Vue.use(VueRouter)、Vue.use(MintUI)、Vue.use(ElementUI)。但是用axios时,就不需要用Vue.use(axios),就......
  • vue-router动态路由无限循环
    //isLogined用来判断用户是否已登录router.beforeEach((to,from,next)=>{if(isLogined){next()}else{console.log('测试')next('login')}})next()表示放行,直接进入to路由,不会再次调用router.beforeEach()next(path:...to,replace:true)拦截......
  • Vue3 中的v-model实现父子组件数据同步通信
    v-model在vue2中也就是双向绑定作用,但是在vue3中除了实现双向绑定外,还可以进行组件的通信父子组件的数据同步,接下来看看例子:<template><h1>{{num}}</h1><child-eventv-model="num"></child-event></template><scriptlang="ts"setup......