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

效果图↓

相关推荐
拼图2093 分钟前
Vue.js开发基础——数据绑定/响应式数据绑定
前端·javascript·vue.js
刘志辉7 分钟前
vue反向代理配置及宝塔配置
前端·javascript·vue.js
oliveira-time21 分钟前
爬虫学习8
开发语言·javascript·爬虫·python·算法
星叔31 分钟前
ARXML汽车可扩展标记性语言规范讲解
java·前端·汽车
sky.fly1 小时前
HTML5+css3(浮动,浮动的相关属性,float,解决浮动的塌陷问题,clear,overflow,给父亲盒子加高度,伪元素)
前端·css·html
Coisini_甜柚か1 小时前
打字机效果显示
前端·vue3·antv
海绵波波1071 小时前
Webserver(4.5)复用
android·开发语言·javascript
老胡说前端1 小时前
vue3 elemnetPlus table 数据id 相同的合并单元格
javascript·vue.js·elementui
废柴小z1 小时前
从零创建vue+elementui+sass+three.js项目
javascript·vue.js·elementui
郑小憨1 小时前
Node.js NPM以及REPL(交互式解释器) 使用介绍(基础介绍 二)
开发语言·前端·javascript·npm·node.js