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

相关推荐
liuyicenysabel4 小时前
多服务上线日记三:
运维·服务器·笔记·学习
CHENGQUAN_kenan4 小时前
佛山亚马逊卖家出口退税合规指南|9610免税、一般贸易退税、无票采购、申报误区全覆盖
大数据·经验分享·笔记·百度
YM52e4 小时前
鸿蒙ArkTS实战项目 - 门店陈列巡检台:巡检卡片与多列切换实现
学习·华为·harmonyos
一只小小的芙厨6 小时前
基础数论总结
笔记·学习·算法
hsjiasb7 小时前
FreeRTOS学习(三十七)——常见错误与工程规范
学习·学习笔记·freertos
小席是个热心肠7 小时前
Redis的自我学习
数据库·redis·学习
zyf1044168 小时前
暑期实践日志 Day33:完成全部字幕添加,工作基本收尾
学习·计算机网络·剪辑·暑期实践·课题任务
@Mike@8 小时前
09-数据库学习笔记(数据库索引与过滤器)
数据库·笔记
一米阳光86618 小时前
软考(中级)软件设计师核心笔记(9)算法——背包问题
笔记·算法·职场发展·软考·软件设计师·中级职称
Chris _data9 小时前
WPF 上位机开发学习笔记 - 第四天
笔记·学习·wpf