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 分钟前
前端 Shadow DOM 全解析与应用
前端
万物更新_4 分钟前
vue框架
前端·javascript·vue.js·笔记
小小小小宇6 分钟前
前端 Web Workers 和 Service Workers 全解析与应用
前端
陆枫Larry22 分钟前
浏览器的 Reflow 和 Repaint 是什么?为什么要尽量避免它们?
前端
孜孜不倦不忘初心24 分钟前
mac安装nvm及问题记录
前端·node.js
Richar26 分钟前
Object.freeze()注意事项
前端·javascript
TA远方27 分钟前
【HTML】JavaScript Canvas 图像截取与保存完整指南
前端·javascript·html·canvas·截图·截取
Asize28 分钟前
JavaScript 数据类型解析:从 null 与 undefined 的迷思到栈堆内存真相
前端·javascript·面试
anyup31 分钟前
分享 5 套 uni-app 实用主题,一键适配暗黑模式
前端·uni-app·视觉设计
李白的天不白32 分钟前
vue3 ts 配置smartadmin相关配置
前端