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>
相关推荐
计算机学姐2 分钟前
基于SpringBoot的汽车租赁系统【个性化推荐算法+数据可视化统计】
java·vue.js·spring boot·后端·spring·汽车·推荐算法
不一样的少年_3 分钟前
产品催: 1 天优化 Vue 官网 SEO?我用这个插件半天搞定(不重构 Nuxt)
前端·javascript·vue.js
-dcr5 分钟前
50.智能体
前端·javascript·人工智能·ai·easyui
BingoGo6 分钟前
免费可商用商业级管理后台 CatchAdmin V5 正式发布 插件化与开发效率的全面提升
vue.js·后端·php
行者9614 分钟前
Flutter跨平台开发适配OpenHarmony:进度条组件的深度实践
开发语言·前端·flutter·harmonyos·鸿蒙
云和数据.ChenGuang15 分钟前
Uvicorn 是 **Python 生态中用于运行异步 Web 应用的 ASGI 服务器**
服务器·前端·人工智能·python·机器学习
IT_陈寒17 分钟前
SpringBoot 3.0实战:这5个新特性让你的开发效率提升50%
前端·人工智能·后端
哈__22 分钟前
React Native 鸿蒙跨平台开发:LayoutAnimation 实现鸿蒙端页面切换的淡入淡出过渡动画
javascript·react native·react.js
遗憾随她而去.25 分钟前
Webpack 面试题
前端·webpack·node.js
我要敲一万行27 分钟前
前端文件上传
前端·javascript