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

相关推荐
爱看大明王朝156616 小时前
磁件学习-磁性元器件的极限计算
笔记·学习
东风破13716 小时前
DM8达梦共享存储集群DSC搭建步骤
数据库·学习·dm达梦数据库
问心无愧051317 小时前
ctf show web入门 40
笔记
星幻元宇VR17 小时前
VR科普大空间:沉浸式公共教育新模式
科技·学习·安全·vr·虚拟现实
@蓝莓果粒茶18 小时前
【Unity笔记】保姆级AssetBundle详解(含代码+避坑指南)
笔记·游戏·unity
kobesdu19 小时前
【ROS2实战笔记-20】ROS2 bag 录播与时间模拟:从基础操作到高级调试技巧
笔记·机器人·ros·ros2
笨鸟先飞的橘猫19 小时前
MMO游戏中的“跨服团队副本”匹配与状态同步系统
分布式·学习·游戏·lua·skynet
kobesdu20 小时前
【ROS2实战笔记-18】ROS2 通信的隐秘控制:DDS 配置参数如何决定系统性能
网络·人工智能·笔记·机器人·开源·ros·人形机器人
雨落在了我的手上20 小时前
如何学习java?
java·开发语言·学习
xiangxiongfly91521 小时前
Vue3 根据角色权限动态加载路由
前端·javascript·vue.js·动态加载路由