<script lang="ts" setup>
// reactive参数必须为引用类型 和ref简单类型或者引用类型
import { reactive, ref } from 'vue';
const arr = reactive([10])
const count = ref(0);
let increasing = true;
console.log(count)
const change = ()=>{
if(increasing){
count.value++;
if(count.value===10){
increasing = false
}
}else{
count.value--;
if(count.value ===0){
increasing = true;
}
}
}
</script>
<template>
<span>{{ arr[0] }}</span>
<span>{{ arr[1] }}</span>
<button @click="change">{{ count }}</button>
</template>change函数实现了一个简单的0-10的一个自增自减的循环，之所以记录是自己写的时候费了点时间，一直在想这个判断条件怎么优化，其实条件无法继续优化了，除非一个一个数字判断或者循环，加一个标志increasing就能解决的事想了半天文章来源地址https://www.toymoban.com/news/detail-672650.html
文章来源：https://www.toymoban.com/news/detail-672650.html
到了这里，关于vue3之reactive和ref学习篇的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
