亲宝软件园·资讯

展开

Vue中的reactive函数操作代码

安静点-- 人气:0

reactive函数

之前给大家介绍过vue3.2 reactive函数问题小结,喜欢的朋友点击查看。

<template>
    <h1>一个人的信息</h1>
    <h2>姓名:{{person.name}}</h2>
    <h2>年龄:{{person.age}}</h2>
    <h3>工作种类:{{person.job.type}}</h3>
    <h3>工作薪水:{{person.job.salary}}</h3>
    <h3>爱好:{{person.hobby}}</h3>
    <h3>测试的数据c:{{person.job.a.b.c}}</h3>
    <button @click="changeInfo">修改人的信息</button>
</template>

<script>
    import {reactive} from 'vue'
    export default {
        name: 'App',
        setup(){
            //数据  虽然reactibe用不了基本类型,但是我们可以将基本类型的数据作为属性,
            // 放到一个对象中,比如下面的name,age,总体来说写法比ref简单,因为不用.value
            let person = reactive({
                name:'张三',
                age:18,
                job:{
                    type:'前端工程师',
                    salary:'30K',
                    a:{
                        b:{
                            c:666
                        }
                    }
                },
                hobby:['抽烟','喝酒','烫头']
            })

            //方法
            function changeInfo(){
                person.name = '李四'
                person.age = 48
                person.job.type = 'UI设计师'
                person.job.salary = '60K'
                person.job.a.b.c = 999
                person.hobby[0] = '学习'
            }

            //返回一个对象(常用)
            return {
                person,
                changeInfo
            }
        }
    }
</script>

加载全部内容

相关教程
猜你喜欢
用户评论