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

相关推荐
Dxy123931021613 分钟前
ECharts折线图入门学习:从基础到实战的完整指南
学习·信息可视化·echarts
_李小白34 分钟前
【OSG学习笔记】Day 25: OSG 设计架构解析
笔记·学习·架构
后藤十八里38 分钟前
维普期刊逆向笔记
javascript·笔记·js逆向
风中的小熊生气40 分钟前
MQ 学习笔记
笔记·学习
Можно44 分钟前
Vue 组件样式隔离完全指南:从原理到实战
前端·javascript·vue.js
elseif1231 小时前
【Markdown】指南(上)
linux·开发语言·前端·javascript·c++·笔记
solicitous1 小时前
之前说到收到一个口头机遇,续集来了
学习·生活
猿类崛起@1 小时前
CherryStudio配置本地MCP服务器实现FileSystem本地文件系统读写操作
人工智能·学习·程序员·大模型·agent·ai大模型·mcp
英俊潇洒美少年1 小时前
Vue3 完整渲染流程(从 createApp → mount → update → unmount)
前端·javascript·vue.js
前端Hardy1 小时前
Pinia 比 Vuex 好用 10 倍?Vue3 状态管理终于不折磨人了!(新手复制即用)
前端·javascript·vue.js