首页 > 其他分享 >vue3 toref函数 torefs函数 简化模板写法

vue3 toref函数 torefs函数 简化模板写法

时间:2025-01-10 11:55:17浏览次数:8  
标签:salary 函数 age torefs toRef person 简化 toref name

一、作用

简化模板{{xx}},xx的长度

二、toRef

1、语法

toRef(对象,属性)

2、案例

<template>
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <h2>工资:{{ salary }}</h2>
    <button @click="name += `~`">姓名</button>
    <button @click="age += 1">年龄</button>
    <button @click="salary-=10">工资</button>
</template>

<script>
    import {reactive, toRef} from 'vue';
    export default {
        name:'Demon',
        setup(){
            let person = reactive({
                name: 'duck',
                age: 8,
                job:{
                    mode:'996',
                    salary: 2800
                }
            })
            console.log(person)
            return{
                name: toRef(person, 'name'),
                age: toRef(person, 'age'),
                salary: toRef(person.job, 'salary')
            }
        }
       
    }
</script>

三、toRefs

1、语法

注意:toRefs只能简化一层对象,不能简化深层

toRefs(对象)

 

标签:salary,函数,age,torefs,toRef,person,简化,toref,name
From: https://www.cnblogs.com/wt7018/p/18663717

相关文章