一、样例效果图：

 

展示定义的数字、字符串、数组和对象

二、项目结构截图

 

三、代码

<template>
    <div>
         {{num}}
    </div>
    <div>
         {{name}}
    </div>
    <div>
         {{arr}}
    </div>
    <div>
         {{arr[0]}}
    </div>
    <div>
         {{arr.slice(0,2)}}
    </div>
    <div>
         {{obj}}
    </div>
    <div>
         {{obj.age}}
         {{obj.userName}}
    </div>
</template>

<script>
 
import {defineComponent,ref} from 'vue'

export default defineComponent({
    //组件名称
    name:'Home',
    //接收父组建的数据
    props:{
        
    },
    
    //定义子组件
    components:{
         
    },
    setup(props,ctx){
        let num = ref(10)
        let name = ref('jack')
        let arr = ref(['a','b','c','d','e'])
        let obj = ref({
            age:20,
            userName:'yc'
        })
        return{
            num,
            name,
            arr,
            obj
        }
    }
})
    
    
</script>

<style scoped lang="scss">
</style>