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

相关推荐
qq_283720059 分钟前
Python Celery + FastAPI + Vue 全栈异步任务实战
vue.js·python·fastapi
吴声子夜歌2 小时前
Vue3——Vue实例与数据绑定
前端·javascript·vue.js
2501_945318492 小时前
备考方案:针对数据分析师的知识结构,制定攻克赛一认证的最优学习路径
学习·百度
一 乐3 小时前
物流信息管理|基于springboot + vue物流信息管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·物流信息管理系统
2301_792674863 小时前
java学习day29(juc)
java·开发语言·学习
qq_571099355 小时前
学习周报四十
学习
孜孜不倦不忘初心5 小时前
Vue 项目结构与命名规范
vue.js·代码规范
Flittly6 小时前
【SpringAIAlibaba新手村系列】(16)调用百度 MCP 服务
java·笔记·spring·ai·springboot
瑶光守护者6 小时前
【一文读懂】OpenClaw系统架构分析:自主人工智能智能体的范式迁移与技术底座分析
人工智能·笔记·学习·系统架构·边缘计算·openclaw