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

相关推荐
今儿敲了吗38 分钟前
18| 差分数组
c++·笔记·学习·算法
浅念-43 分钟前
C++ 模板初阶:从泛型编程到函数模板与类模板
c语言·开发语言·数据结构·c++·笔记·学习
橙河网络1 小时前
橙河网络:国外问卷调查好做吗?有具体的步骤讲解吗?
经验分享·笔记·课程设计
知识分享小能手1 小时前
SQL Server 2019入门学习教程,从入门到精通,SQL Server 2019 创建和使用索引 — 语法知识点及使用方法详解(12)
数据库·学习·sqlserver
一 乐1 小时前
林业资源管理|基于java + vue林业资源管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·林业资源管理系统
扶苏10021 小时前
深入 Vue 3 computed:原理、实战与避坑指南
前端·javascript·vue.js
dalong101 小时前
A26:扫雷游戏
笔记·游戏·aardio
慧一居士2 小时前
vue项目中,tsx格式的文件是什么,怎样使用
前端·vue.js
前路不黑暗@2 小时前
Java项目:Java脚手架项目的模板服务和网关服务的实现(三)
java·开发语言·spring boot·git·学习·spring cloud·maven
山岚的运维笔记3 小时前
SQL Server笔记 -- 第50章 存储过程
数据库·笔记·sql·microsoft·oracle·sqlserver