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

相关推荐
懂懂tty11 分钟前
Vue2与Vue3之间API差异
前端·javascript·vue.js
吃好睡好便好1 小时前
改变时间轴的跨度
学习·生活
老毛肚1 小时前
软件测试期末考试
vue.js
fox_lht1 小时前
15.3.改进我们之前的输入、输出项目
开发语言·后端·学习·rust
chase。1 小时前
【学习笔记】SimpleVLA-RL:通过强化学习扩展 VLA 训练
笔记·学习
C语言小火车2 小时前
什么时候用智能指针?什么时候用裸指针?
c语言·c++·学习·指针
杨若瑜2 小时前
本地开发环境慢?localhost的锅!
vue.js
AOwhisky2 小时前
Redis 学习笔记(第一期):概述、安装配置与核心理论
运维·数据库·redis·笔记·学习·云计算
智者知已应修善业2 小时前
【51单片机8位数码管同时倒计时从9999】2024-1-25
c++·经验分享·笔记·算法·51单片机