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

相关推荐
疯狂打码的少年2 分钟前
【数据库技术】关系模型基本概念(关系/属性/元组/键)
java·服务器·数据库·笔记
Bruce_Liuxiaowei2 小时前
从基础理论开始学习人工智能(三):盲目搜索——从状态空间图到生成-测试范式
人工智能·学习
有梦想的骇客2 小时前
PyTorch学习笔记
pytorch·笔记·学习
IT毕设实战小研3 小时前
基于安卓的空气质量查询系统
android·大数据·vue.js·爬虫·python·django·课程设计
Capricorn19883 小时前
个人知识库接入大模型频现“幻觉引用”?排查 RAG 溯源失效问题,解析知芽构建可信第三大脑的底层架构
大数据·论文阅读·人工智能·笔记·架构·论文笔记
陈年老古董3 小时前
深度学习入门笔记:从神经元到深度神经网络
人工智能·笔记·深度学习·神经网络·学习
2601_967100425 小时前
护眼灯哪个牌子更好更专业耐用?专业长效护眼台灯品牌推荐,品质过硬
学习·护眼·台灯
疯狂打码的少年5 小时前
【数据库技术】关系完整性约束(实体/参照/用户定义)
运维·服务器·数据库·笔记
微露清风5 小时前
快慢指针算法学习记录
学习·算法·快慢指针
sunshine22 girl6 小时前
Angular7,9,学习笔记四 父子组件传值,组件之间传值
笔记·学习