【Vue】响应式

html 复制代码
<script setup>
  import{ref}from 'vue'
  let counter=ref(10)
  function increase(){
    counter.value++
  }
  function decrease(){
    counter.value--
  }
</script>

<template>
  <button @click="increase">+</button>
  <p id="id1">{{counter}}</p>
  <button @click="decrease">-</button>
</template>

<style scoped>
#id1{
  color: aqua;
  font-size: 40px;
}
</style>

效果图↓

相关推荐
写不来代码的草莓熊12 小时前
vue前端面试题——记录一次面试当中遇到的题(10)
前端·vue.js·面试
tiantian_cool13 小时前
正确的 .gitignore 配置
前端·github
三小河13 小时前
封装 classNames:让 Tailwindcss 类名处理更优雅
前端·javascript
起这个名字13 小时前
ESLint 导入语句的分组排序
前端·javascript
踩着两条虫13 小时前
VTJ.PRO低代码快速入门指南
前端·低代码
Lazy_zheng13 小时前
一场“数据海啸”,让我重新认识了 requestAnimationFrame
前端·javascript·vue.js
crary,记忆13 小时前
MFE: React + Angular 混合demo
前端·javascript·学习·react.js·angular·angular.js
Asort13 小时前
JavaScript设计模式(十七)——中介者模式 (Mediator):解耦复杂交互的艺术与实践
前端·javascript·设计模式
linda261813 小时前
String() 和 .toString()的区别
前端·javascript·面试
拜晨13 小时前
初探supabase: RLS、trigger、edge function
前端