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 分钟前
echarts折线图矩形选择 框选图表
前端·javascript·echarts
羽沢313 分钟前
Canvas学习一
前端·css·学习·canvas
喜崽9 分钟前
uniapp消息会话界面【消息滚动到底部】-02
uni-app
KaMeidebaby12 分钟前
卡梅德生物技术快报|锦葵科植物遗传转化工程化优化:棉花胚尖农杆菌转化体系参数固化与效率提升
前端
invicinble15 分钟前
前端框架使用vue-cli( 第二层:工程配置层--4.axios需要做的基础配置)
前端·vue.js·前端框架
MXN_小南学前端16 分钟前
Vue + Element UI 分页器封装:比直接用 el-pagination 更省心的通用方案
javascript·vue.js·elementui
用户0704557412919 分钟前
第一次前后端联调后,我终于理解了什么是工程化
前端
亲亲小宝宝鸭21 分钟前
Vue3中那些冷门但实用的方法
前端·vue.js
qq_3495232622 分钟前
分析原型到表的过程
前端
25 分钟前
Pinia 全局状态管理
前端