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 小时前
第10章 千团出世|《互联网产品恩仇录》
前端
非优秀程序员2 小时前
第11章 小高在对面|《互联网产品恩仇录》
前端
非优秀程序员2 小时前
第14章 只剩美团|《互联网产品恩仇录》
前端
非优秀程序员2 小时前
第09章 老乡何必为难老乡|《互联网产品恩仇录》
前端
非优秀程序员2 小时前
第07章 孙德良的阳谋|《互联网产品恩仇录》
javascript·后端
非优秀程序员2 小时前
第03章 三大门户,烽烟起于瀛海威|《互联网产品恩仇录》
前端
非优秀程序员3 小时前
第04章 邮箱大战,163 与 QQ 的暗战|《互联网产品恩仇录》
java·vue.js·架构
程序员大阳6 小时前
HTML+CSS+JS对话式实战(5)-活动管理页之查看报名名单的实现
javascript·css·html·查看报名名单
曦樂~6 小时前
【Web Development】02 CSS
前端·css
风骏时光牛马7 小时前
后端服务接口开发与数据逻辑处理
前端