使用ref函数和reactive函数写的技术器小程序,ref的实现用到了reactive,推荐使用ref,代码
点击查看代码
<script > //setup是组合是API的体现
import {reactive, ref} from 'vue'
export default{
setup() {
const status=reactive({
count:0
})
const state=ref(0)
const setCount1=()=>{
status.count++
}
const setCount2=()=>{
state.value++
}
return {
status,
setCount1,
state,
setCount2
}
}
}
</script>
<!-- //模板支持多个根目录 -->
<template>
<div>
<button @click="setCount1">{{ status.count }}</button>
<button @click="setCount2">{{ state }}</button>
</div>
</template>
<style scoped>
button{
height: 30px;
width: 30px;
}
</style>