006-使用ref定义基本类型数据

程序员成长之旅 · 程序员成长之旅/Vue.js学习/Vue3/慕课网 - vue3.0实现todolist · 144 字

使用`ref`定义基本类型数据


<templete>

<div>

<div>{{num}}</div>

<div>{{name}}</div>

<div>{{arr.slice(0, 2)}}</div>

<div>{{obj.age}}</div>

</div>

</templete>

<script>

export default defineComponent({

name: "Home",

components: {

NavHeader, //实际上和 NavHeader: NavHeader 等效, 也就是键和名相等就可以使用这种方式简写

NavMain,

NavFooter,

},

setup() {

let num = ref(10) //定义数字类型数据

let name = ref('jack') //定义字符串类型数据

let arr = ref(['a', 'b', 'c', 'd']) //定义数组

let obj = ref({ //定义对象

age: 20

})

return { //注意: 所有定义的数据必须通过return返回, 才能在templete中访问

num,

name,

arr,

obj

};

},

});

</script>