首页 > 其他分享 >vue按钮响应

vue按钮响应

时间:2024-02-26 19:12:18浏览次数:27  
标签:count vue handleClick 响应 Vue 按钮 ref

1.代码

<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(11)
//函数卸载script里
function handleClick() {
  // 处理按钮点击事件的逻辑
  console.log("按钮被点击了!");
}

</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
  
  <button type="button" @click="handleClick">My Button </button>
</template>



<style scoped>
.read-the-docs {
  color: #888;
}
</style>

 

标签:count,vue,handleClick,响应,Vue,按钮,ref
From: https://www.cnblogs.com/judes/p/18034980

相关文章

  • vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一、是什么权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源而前端权限归根结底是请求的发起权,请求的发起可能有下面两种形式触发页面加载触发页面上的按钮点击触发总的来说,所有......
  • Vue学习笔记16--监视属性watch + 深度监视 + 监视简写
    监视属性watch示例一:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>计算属性</title&......
  • GB28181视频监控平台EasyCVR如何通过配置实现级联不响应下级平台的检索消息?
    AI视频智能分析/视频监控管理平台EasyCVR能在复杂的网络环境中(专网、内网、局域网、广域网、公网等)将前端海量的设备进行统一集中接入与视频汇聚管理,平台支持设备通过4G、5G、WIFI、有线等方式进行视频流的快捷接入和传输。平台能将接入的视频流进行汇聚、转码与多格式分发,可分发......
  • uniapp nvue页面 map地图全屏设置
    因为nvue页面:100vh以及百分比不可用,所以1,可以获取当前屏幕高度然后赋值<map:latitude="latitude":longitude="longitude":style="'height:'+windowHeight*2+'rpx;'"></map>const{windowWidth,windowHeight,appName}=......
  • 响应式设计
    一、什么是响应式设计是一种网站或应用程序设计方法页面的布局、内容、以及功能在不同的设备和屏幕尺寸下都能够自动适应确保用户无论在何种设备上都能够获得一致且友好的体验二、如何实现响应式设计1、流式布局使用百分比、em或rem等相对单位定义页面的宽度和其他尺寸,元......
  • vite+vue3 import批量导入图片
    vite+vue3import批量导入图片主要使用“import.meta.glob”方法。具体使用如下:1.constlist=import.meta.glob("../../static/images/left-image/*.*",{eager:true})2.imageList=Object.values(list).map((v:any)=>v.default);3.页面使用   ......
  • Vue 学习笔记15--用户代码片段
    { //Placeyour全局snippetshere.Eachsnippetisdefinedunderasnippetnameandhasascope,prefix,bodyand //description.Addcommaseparatedidsofthelanguageswherethesnippetisapplicableinthescopefield.Ifscope //isleftemptyor......
  • vue页面上显示package.json中的version
    在Vue项目中,你可以使用process.env来访问构建时注入的环境变量,包括package.json中的某些字段。但是,process.env通常不会直接包含package.json的所有内容。不过,你可以通过构建脚本将version字段注入到环境变量中。以下是如何在Vue项目中获取package.json中的version字段的步骤:在......
  • vue项目npm run build的时候自动更新package.json中的version
    在vue项目最外侧新增一个addVersion.js 脚本,脚本中编写逻辑来解析当前的版本号//addVersion.jsconstfs=require('fs');constpath=require('path');constpackageJsonPath=path.join(__dirname,'package.json');try{//读取package.json......
  • Vue实现图片瀑布流
    在线演示地址:点击前往一,创建一个Waterfall组件代码如下:<template><divclass="waterfall"><!--循环渲染每一列--><divclass="waterfall-column"v-for="(column,index)incolumns":key="index"><!--......