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>
相关推荐
梦想CAD控件4 分钟前
在线CAD开发包结构与功能说明
前端·javascript·vue.js
张拭心9 分钟前
春节后,有些公司明确要求 AI 经验了
android·前端·人工智能
时光不负努力10 分钟前
typescript常用的dom 元素类型
前端·typescript
小怪点点15 分钟前
大文件切片上传
前端
时光不负努力16 分钟前
TS 常用工具类型
前端·javascript·typescript
SuperEugene17 分钟前
Vue状态管理扫盲篇:Vuex 到 Pinia | 为什么大家都在迁移?核心用法对比
前端·vue.js·面试
张拭心19 分钟前
Android 17 来了!新特性介绍与适配建议
android·前端
徐小夕24 分钟前
pxcharts-vue:一款专为 Vue3 打造的开源多维表格解决方案
前端·vue.js·github
Hilaku24 分钟前
我会如何考核一个在简历里大谈 AI 提效的高级前端?
前端·javascript·面试
进击的尘埃37 分钟前
Vue3 中 emit 能 await 吗?事件机制里的异步陷阱
javascript