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

相关推荐
数据皮皮侠AI5 分钟前
顶刊同款!中国地级市风灾风险与损失数据集(2000-2022)|灾害 / 环境 / 经济研究必备
大数据·人工智能·笔记·能源·1024程序员节
1314lay_10077 分钟前
el-table表格数据分页切片,导致表格的多选失效
javascript·vue.js·elementui
墨^O^8 分钟前
C++ Memory Order 完全指南:从 relaxed 到 seq_cst,深入理解无锁编程与 happens-before
linux·开发语言·c++·笔记·学习·算法·缓存
阿荻在肝了8 分钟前
Agent学习五:LangGraph学习-节点与可控性
人工智能·python·学习·agent
qq_120840937112 分钟前
Three.js 模型加载稳定性实战:从资源失败到可用发布的工程化方案
前端·javascript·vue.js·vue3·three.js
玄米乌龙茶12316 分钟前
Web Search API 实操:构建智能搜索 Agent
人工智能·笔记·学习
Hical_W18 分钟前
深入学习CPP20_协程
学习·github
星幻元宇VR18 分钟前
VR党建互动平台助力党建学习提质增效
科技·学习·安全·vr·虚拟现实
XS03010619 分钟前
Java基础笔记(一)
java·笔记·python
guhy fighting27 分钟前
使用vue-virtual-scroller导致打包报错
前端·javascript·vue.js·webpack