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用来挂载业务逻辑函数

相关推荐
尤乐娃子1 小时前
进入大厂(厂子大)实习Day12
前端·笔记·实习
砚凝霜2 小时前
软考网络工程师|第 6 章 密码学、哈希、数字签名、数字证书 PKI 完整备考笔记
笔记·密码学·哈希算法
QAQo7T3 小时前
Python组蓝桥杯备赛超详细知识点总结笔记_排序算法篇
笔记·python·算法·蓝桥杯·排序算法
lion_heart0013 小时前
成功日记Plus 智能记账:共享账本、预算管控、Excel 导出等一次讲清
笔记
星辰即远方3 小时前
计算器仿写总结
学习·ui·ios·cocoa·xcode
智者知已应修善业5 小时前
【三位数字显示计时定时器设计-同步方式】2025-6-30
驱动开发·经验分享·笔记·硬件架构·硬件工程
影寂ldy5 小时前
SQL 事务(Transaction)完整版学习笔记(含转账案例+存储过程+异常捕获)
笔记·sql·学习
风曦Kisaki7 小时前
# Kubernetes(K8s)笔记Day12 :K8s 七层代理(Ingress 和 Ingress Controller)
linux·笔记·云原生·容器·kubernetes
Bernice橘子8 小时前
职场英语学习计划Day034
学习
雪之下雪乃的代码日记8 小时前
Python快速入门(Java开发者版)
java·开发语言·笔记·python