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

相关推荐
淬渊阁25 分钟前
汇编学习之《扩展指令指针寄存器》
汇编·学习
lalapanda27 分钟前
UE5学习记录part12
学习·ue5
lvbb6633 分钟前
框架修改思路
前端·javascript·vue.js
qq_4560016535 分钟前
43、接口请求需要时间,导致页面初始加载时会出现空白,影响用户体验
javascript·vue.js·ux
工业互联网专业36 分钟前
基于springboot+vue的动漫交流与推荐平台
java·vue.js·spring boot·毕业设计·源码·课程设计·动漫交流与推荐平台
不要影响我叠Q1 小时前
《Fundamentals of Electromigration-Aware IntegratedCircuit Design》笔记
笔记
蒹葭苍苍8731 小时前
LoRA、QLoRA微调与Lama Factory
人工智能·笔记
FanetheDivine1 小时前
实现"选中表格项将元素加入集合"的动画效果
javascript·vue.js
Json_1 小时前
Vue 构造器 Vue.extend
前端·vue.js·深度学习
小old弟1 小时前
老生常谈: 谈谈对vue的理解?vue3有而vue2没有的东西或者说特性?
前端·vue.js