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

相关推荐
-To be number.wan5 分钟前
算法日记 | 暴力枚举
学习·算法
xiaohua0708day1 小时前
Lodash库
前端·javascript·vue.js
jialiguo1 小时前
博客摘录「 尚硅谷Vue3入门到实战,最新版Vue3+TypeScript前端开发教程」2024年8月7日
笔记
万物皆对象6661 小时前
切换路由时页面空白问题(vue3)
前端·vue.js·typescript
SNKXD_11 小时前
2026品牌运营团队AI营销培训:TOP5轻量化课程适配常态化技能升级学习
大数据·人工智能·学习
小新同学^O^2 小时前
简单学习 --> 指令微调
人工智能·学习·llm·指令微调
風清掦2 小时前
【STM32学习笔记-14】WDG看门狗 - 14.2 WWDG窗口看门狗
笔记·stm32·单片机·嵌入式硬件·学习·fpga开发
晓梦林2 小时前
bughush靶场学习笔记
笔记·学习
hssfscv2 小时前
QT的学习记录1
开发语言·qt·学习
weixin_446260852 小时前
[特殊字符] 从弱点中学习:小计算使用智能体的自动领域专业化
人工智能·学习