【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>

效果图↓

相关推荐
嘻嘻嘻嘻嘻嘻ys16 分钟前
《Spring Boot 3 + GraalVM原生镜像实战:云原生时代的毫秒启动与性能调优》
前端·后端
嘻嘻嘻嘻嘻嘻ys19 分钟前
《Spring Boot 3.0×GraalVM:云原生时代的毫秒级启动实战革命》
前端·后端
嘻嘻嘻嘻嘻嘻ys21 分钟前
《Vue 3.4响应式内核优化与WebAssembly性能突破实战指南》
前端·后端
海天胜景23 分钟前
vue3 el-table 右击
javascript·vue.js·elementui
Mercury-circle25 分钟前
JavaScript基础知识合集笔记1——数据类型
开发语言·javascript·笔记
一天睡25小时36 分钟前
前端性能优化面试回答技巧(一)
前端·面试
樊小肆36 分钟前
Vue3 在线 PDF 编辑 2.0 缩放拖拽、渲染优化功能解析
前端·vue.js·开源
程序员韩立37 分钟前
精通 React Hooks:从核心技巧到自定义实践
前端
WEI_Gaot38 分钟前
React Hooks useRef useId
前端·react.js
一天睡25小时39 分钟前
视频HLS分片与关键帧优化深度解析
前端·javascript