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>
相关推荐
爱笑的眼睛114 小时前
uniapp 云开发全集 云数据库
javascript·数据库·oracle·uni-app
赵大仁5 小时前
微前端统一状态树实现方案
前端·前端框架
阿珊和她的猫6 小时前
钩子函数和参数:Vue组件生命周期中的自定义逻辑
前端·javascript·vue.js
勘察加熊人6 小时前
vue展示graphviz和dot流程图
前端·vue.js·流程图
软件2056 小时前
【登录流程图】
java·前端·流程图
2501_915373887 小时前
Electron 从零开始:构建你的第一个桌面应用
前端·javascript·electron
贩卖黄昏的熊8 小时前
JavaScript 笔记 --- part8 --- JS进阶 (part3)
前端·javascript·笔记
CodeCipher8 小时前
Java后端程序员学习前端之CSS
前端·css·学习
Enti7c9 小时前
JavaScript 实现输入框的撤销功能
开发语言·javascript·ecmascript
武昌库里写JAVA9 小时前
Java 设计模式
java·vue.js·spring boot·课程设计·宠物管理