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

相关推荐
wuhen_n4 分钟前
函数式组件 vs 有状态组件:何时使用更高效?
前端·javascript·vue.js
今儿敲了吗8 分钟前
python基础学习笔记第四章
c++·笔记·python·学习
【数据删除】34810 分钟前
计算机复试学习笔记 Day44
笔记·学习
星幻元宇VR16 分钟前
VR地震科普学习机|沉浸式防震减灾新体验
学习·安全·vr·虚拟现实
李剑一24 分钟前
Cesium 海量点位不卡顿!图标动态聚合效果深度解析,看完直接抄代码!
前端·vue.js·cesium
星轨初途24 分钟前
类和对象(上)
开发语言·c++·经验分享·笔记
星幻元宇VR27 分钟前
VR爱国教育学习机|让红色精神在沉浸体验中代代传承
科技·学习·vr·虚拟现实
予你@。29 分钟前
Vue 项目中如何引用本地字体(完整指南)
前端·javascript·vue.js
留院极客离心圆33 分钟前
C++ 进阶笔记:宏
开发语言·c++·笔记
逆小舟33 分钟前
【SWM320】学习使用UART
单片机·学习·嵌入式软件