uni-app 之 v-on:click点击事件

uni-app 之 v-on:click点击事件

image.png

复制代码
<template>
    <!-- vue2的<template>里必须要有一个盒子,不能有两个,这里的盒子就是 view-->
    <view>
        --- v-on:click点击事件 ---
        <view v-on:click="onclick">{{title}}</view>
        --- 点击事件简写 @click ---
        <view @click="onclicknum">数字:{{num}}</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: "事件1",
                num: 1
            }
        },
        methods: {
            // vue3里可以直接省略this. vue2则不可以
            onclick: function() {
                this.title = "事件点击后变化"
            },
            
            // 简写,直接省略: function
            // onclicknum() {
            //  this.num++
            // },
            onclicknum: function() {
                this.num++
            }
            
        }
    }
</script>

<style lang="scss">
</style>
相关推荐
比老马还六1 分钟前
Bipes-Blockly项目二次开发/硬件功能-LED灯条(十一)
前端·嵌入式硬件·硬件工程
circuitsosk11 分钟前
智能体任务拆解与执行:基于ReAct+Plan-and-Execute框架的行业Skill构建实录
前端·javascript·python·react.js·react·llm agent·智能体编排
daols8815 分钟前
vue 表格vxe-table 实现紧凑型表格的方式
前端·javascript·vue.js
恋猫de小郭32 分钟前
Flutter 多窗口支持类型和 API 介绍
android·前端·flutter
必须会一定会36 分钟前
AI 前端项目验收:Playwright 截图、响应式视口、控制台错误与交互回归
前端·人工智能·gpt·交互·ai编程
Java搬码工38 分钟前
VUE3使用教程
前端·javascript·vue.js
小白勇闯网安圈40 分钟前
Vue 3 核心进阶:组合式 API、响应式系统与 <script setup>
前端·javascript·vue.js
张风捷特烈42 分钟前
当 AI 遇见 Flutter | 打造 500+ Widget 专属Logo
android·前端·flutter
雪芽蓝域zzs1 小时前
Vue3 + JS + pnpm 创建项目
开发语言·javascript·ecmascript