首页 > 其他分享 >008.Vue3入门,最基础的事件处理,点击按钮增加次数,支持传参

008.Vue3入门,最基础的事件处理,点击按钮增加次数,支持传参

时间:2024-08-10 17:16:52浏览次数:10  
标签:传参 事件处理 按钮 Vue3 count1 count2 data

1、代码如下:

<template>
  <h3>内联事件处理群</h3>
  <button @click="addCount1">Add</button>
  <p>{{ count1 }}</p>
  <button @click="addCount2('hello')">按钮</button>
  <p>{{ count2 }}</p>
</template>

<script>
export default {
  data() {
    return {
      count1: 0,
      count2: 0
    }
  },
  methods: {
    addCount1() {
      //读取到data里面的数据方案:this.count
      this.count1++;
    },
    addCount2(msg) {
      //读取到data里面的数据方案:this.count
      console.log(msg);
      this.count2++;
    }
  }
}
</script>

2、效果如下:

 

标签:传参,事件处理,按钮,Vue3,count1,count2,data
From: https://www.cnblogs.com/tianpan2019/p/18352524

相关文章

  • vue3中piniaPluginPersistedstate解决动态路由刷新空白问题
    总结:使用了回调函数来防止持久化数据前就渲染页面,导致刷新空白1.Store里的代码(**这里主要就是在addNewRoute写了回调callback**)addNewRoute(menuList,()=>{//重新渲染router.push({path:'/home/individual'})});import{defineStore}from"pinia";import......
  • 007.Vue3入门,进行列表渲染来输出循环的内容
    1、代码如下:<template><h3>列表渲染</h3><pv-for="(item,index)ofnames">序号:{{index}},内容:{{item}}</p><divv-for="itemofresult"><p>ID:{{item.id}},PKID:{{item.pkid}}</p>......
  • Vue3Pinia入门学习
    文章目录什么是pinia创建空Vue项目并安装Pinia1.创建空Vue项目2.安装Pinia并注册、基础用法:实现counter实现getters异步actionstoreToRefs保持响应式解构什么是piniaPinia是Vue的专属状态管理库,可以实现跨组件或页面共享状态,是vuex状态管理工具的替代品,和......
  • 004.Vue3入门,使用绑定属性时undefined和disabled用法
    1、代码如下:<template><divv-bind:id="myId1"v-bind:class="testCls">测试1</div><divv-bind:id="myId2"v-bind:title="testTitle">测试2</div><div:id="myId3":class="te......
  • 002.Vue3入门,使用模板语法的一些高级功能
    1、代码如下:<template><h3>模板语法</h3><p>{{msg}}</p><p>{{msg_cn}}</p><p>{{number+1}}</p><p>{{ok?'Yes':'No'}}</p><p>{{message.split("......
  • useImperativeHandle 是什么?你可以理解为 vue3 的 expose
    useImperativeHandle确实类似于Vue3的expose,两者都用于控制子组件向父组件暴露的接口。在React中,useImperativeHandle需要与forwardRef一起使用,原因如下:转发引用:forwardRef允许父组件将ref传递给子组件。没有forwardRef,父组件无法直接访问子组件的ref。......
  • Vue3的学习---4
    4.Vue组件4.1初始Vue组件4.1.1根组件根组件的主要作用是:初始化应用程序。提供全局的状态管理或配置。作为其他组件的容器,构建整个应用程序的组件树。通过根组件,开发者可以控制应用程序的整体结构和行为,确保各个部分能够协同工作。<body><divid="app"></div>......
  • Vue3项目创建及相关配置
    Vue是一种用于构建用户界面的JavaScript框架。它采用了一种称为MVVM(Model-View-ViewModel)的架构模式。MVVM是一种将用户界面与业务逻辑和数据分离的设计模式。它包括三个部分:Model(模型):表示应用程序的数据和业务逻辑。在Vue中,模型通常是一个JavaScript对象。View(视图):表示......
  • Django5+Vue3:OA系统前后端分离项目实战-Frame页面框架搭建(14)
    Django5+Vue3系列文章前言本节开始,全文仅对会员开放。若点赞和收藏数量超过100,全文将免费开放。此项目采用Django框架的5.0.7版本进行开发。Django5.0支持的Python版本为3.10、3.11和3.12。OA系统系列文章将持续更新,直至项目的Docker部署阶段。专栏链接:......
  • 前端vue3学习记录二
    ref和reactive的补充在使用reactive 进行对象数据的响应化时,要注意,将响应式对象分配给一个新的对象的时候,新的对象是不具有响应式性质的functionChangecar(){car={brand:'红旗',price:20000}//没有响应式性质car=reactive({brand:'红旗',price:20......