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

相关推荐
ReaF_star2 分钟前
K8s Pod调度【学习笔记】
笔记·学习·kubernetes
MXN_小南学前端6 分钟前
Vue 视频上传实战:视频预览、MediaRecorder 压缩与自定义上传
前端·vue.js
程序员大辉18 分钟前
Beaver Notes(海狸笔记)v4.4.0 中文版 ,开源免费、本地存储、零追踪的笔记软件
笔记·开源
吴声子夜歌25 分钟前
Vue3——使用Vue Router实现路由
前端·javascript·vue.js·vue-router
CDwenhuohuo35 分钟前
小程序全局使用api
javascript·vue.js·小程序
叛逆的小小黄37 分钟前
maxent建模结果中响应曲线的美化
经验分享·笔记·r语言·maxent
handler011 小时前
Linux: 基本指令知识点(3)
linux·服务器·c语言·开发语言·c++·笔记
fengci.1 小时前
ctfshow其他(web408-web432)
android·开发语言·前端·学习·php
sensen_kiss1 小时前
CPT306 Principles of Computer Games Design 电脑游戏设计原理 Pt.6 Gameplay 游戏玩法
学习·游戏
蜡台1 小时前
VUE node EPERM: operation not permitted, unlink 错误
前端·javascript·vue.js