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 分钟前
每周读书与学习->JMeter性能测试脚本编写实战(四)-利用JMeter对MySQL数据库查询进行性能测试
学习·jmeter·性能调优·jmeter性能测试·性能分析·每周读书与学习
Hi_kenyon9 分钟前
Ref和Reactive都是什么时候使用?
前端·javascript·vue.js
InterestOriented17 分钟前
中老年线上学习发展:兴趣岛“内容+服务+空间”融合赋能下的体验升级
人工智能·学习
宇钶宇夕21 分钟前
CoDeSys入门实战一起学习(二十八):(ST)三台电机顺起逆停程序详解
运维·学习·自动化·软件工程
£漫步 云端彡22 分钟前
Golang学习历程【第十篇 方法(method)与接收者】
开发语言·学习·golang
im_AMBER41 分钟前
Leetcode 111 两数相加
javascript·笔记·学习·算法·leetcode
驭渊的小故事1 小时前
类和对象的笔记3
笔记
四谎真好看1 小时前
JavaWeb学习笔记(Day12)
笔记·学习·学习笔记·javaweb
阿蒙Amon1 小时前
TypeScript学习-第11章:配置文件(tsconfig.json)
学习·typescript·json
babe小鑫1 小时前
中专学历转内容运营分析的学习路径
学习·产品运营·内容运营