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>
相关推荐
夜焱辰几秒前
我花了3个月,把一个终端 AI Agent 搬进了浏览器——踩坑全记录
前端·agent
阿黎梨梨1 分钟前
英伟达API + OpenAI SDK 实战:环境、密钥、异步,全流程拆解
前端
LongJ_Sir6 分钟前
Cesium-鼠标传入着色器中并进行交互
javascript·着色器
爱勇宝8 分钟前
写给年轻程序员:别急着证明自己,也别太早放过自己
前端·后端·程序员
往上跑山9 分钟前
指南Ignition动态执行前的事情
javascript
叶落阁主12 分钟前
Vue3 中如何设计一套好用的 Icon 和 IconPicker 组件
前端·vue.js·icon
Dreamland工坊13 分钟前
AI 视频到可用资产:浏览器端抽帧与导出全链路方案选型
前端
kungggyoyoyo13 分钟前
从0开发一套geo优化软件:数据模型与API设计
前端·vue.js·后端
李明卫杭州14 分钟前
Web Components 完全指南:从 Custom Elements 到 Shadow DOM
前端
Darling噜啦啦14 分钟前
BEM 命名规范 + CSS Reset 实战:从微信按钮页面看专业前端开发
前端·css·代码规范