VUE学习笔记10__vue指令v-on配置method函数

javascript 复制代码
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
<div id="app">
    <button @click="conceal_reveal">切换显示隐藏</button>
    <h1 v-show="isShow">helloworld</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
            el: '#app',
            data: {
              isShow:true
            },
            methods:{
                conceal_reveal(){
                    this.isShow = !this.isShow
                }
            }
          })
</script>
</body>
</html>

预览

tip:this用来指代当前管理的app,方便书写。

method用来挂载业务逻辑函数

相关推荐
爱喝水的鱼丶10 分钟前
SAP-ABAP:ABAP Development Tools(ADT)安装配置学习分享教程(四篇连载) 第三篇:ADT常用开发插件与个性化配置教程
数据库·学习·sap·abap
前端小马14 分钟前
PTE考试笔记
笔记·英语
GHL28427109018 分钟前
python通过API调用Coze智能体学习
学习·ai
Jackyzhe29 分钟前
从零学习Kafka:生产者压缩
分布式·学习·kafka
爱喝水的鱼丶1 小时前
SAP-ABAP:ABAP Development Tools(ADT)安装配置学习分享教程(四篇连载) 第二篇:ADT客户端完整安装与初始配置教程
运维·开发语言·学习·sap·abap
蜡台2 小时前
Vue + SpringBoot 实现 WebSocket 基于 Sec-WebSocket-Protocol 传参鉴权(避坑指南)
vue.js·spring boot·websocket·sec
m0_46644103詹湛2 小时前
FPGA时序优化与高速接口实战手册
笔记·学习·fpga开发·硬件架构·verilog
镜宇秋霖丶2 小时前
2026.5.10@霖宇博客制作中遇见的问题
前端·vue.js·elementui
问心无愧05132 小时前
ctf show web 入门39
android·前端·笔记
Yeh2020582 小时前
Mybatis笔记一
java·笔记·mybatis