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

相关推荐
试剂界的爱马仕8 分钟前
Anti-mouse PD-1 mAb (Clone RMP1-14) 与 Axitinib 小鼠实验使用方案整理汇总
大数据·人工智能·深度学习·学习
Gp7HH6hrE1 小时前
OpenAI 与 Anthropic 开放公共学习平台
人工智能·学习·chatgpt
kaixin_learn_qt_ing2 小时前
2026.7.3---学习记录
学习
格子软件2 小时前
2026年GEO优化系统源码的分布式状态机深度拆解
java·前端·vue.js·vue·geo
99乘法口诀万物皆可变3 小时前
PcanToVectorXL_V01:打通 Vector 与 PCAN 的双向 CAN/CAN‑FD 桥梁
c++·学习
MartinYeung53 小时前
[论文学习] CAMIA:下文感知成员推理攻击
人工智能·深度学习·学习
secondyoung3 小时前
Cortex-R52学习:存储系统
arm开发·单片机·学习·arm
科技IT杂谈3 小时前
2026年智能体与定制工具平台观察:五个平台的路径与场景
学习
格子软件3 小时前
2026年GEO优化系统源码解构:核心状态机与高并发流控深度剖析
java·vue.js·spring boot·vue·geo
New农民工3 小时前
射频芯片学习-Lora包参配置
学习