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>
相关推荐
用户93851563507几秒前
从 O(n²) 到 O(nlogn):一文读懂快速排序的“快”与“妙”
javascript·算法
橘子星7 分钟前
LLM 无状态架构实践:从原理到代码落地
前端·javascript·人工智能
LiuMingXin7 分钟前
意图与代码之间:AI编程范式全景解读
前端·后端·面试
用户831348593069833 分钟前
Cesium实现雾气效果:按钮一键控制打开/关闭雾气效果,滑块拖动实时控制雾气浓度
vue.js·cesium
壹方秘境1 小时前
ApiCatcher支持抓包HTTP传输大文件的实现原理分享
前端·后端·客户端
一份执念1 小时前
uni-app项目 (vue+vite + uni-UI)中引入umd格式JS文件,微信小程序中导入报错处理方案
前端·uni-app·echarts
To_OC1 小时前
手写快排次次翻车?别死背快排模板了,这才是面试官想听的底层逻辑
javascript·算法·排序算法
ClouGence1 小时前
2026 年自动化测试工具选型指南:8 款主流工具对比
前端·测试
lichenyang4532 小时前
为什么需要双线程通信、JavaScriptProxy 和 runJavaScript 分别干什么
前端
以和为贵2 小时前
前端也能搞懂 RAG:用 JS 手写一条最小检索增强链路
前端·人工智能·面试