vue指令之事件指令

目录

什么是事件指令

事件指的是：点击事件，双击事件，划动事件，焦点事件...

  • 语法
v-on:事件名='函数'
# 注意：函数必须写在  methods配置项中

示例

# 点击按钮，隐藏h1标签
<body>
<div id="app">
    <button v-on:click="myclick">点我</button>
    <h1 v-show="show">11111111</h1>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            myclick:function () {
                // this就是当前vue实例，就是vm实例
                this.show=!this.show   // 这里 ！ 符号的作用是，如果是true就变为false，如果是false就变为true
            }
        }
    })
</script>
  • 简写形式
@事件名='函数'

# 下面的函数也可以简写
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            myclick:function () {
                // this就是当前vue实例，就是vm实例
                this.show=!this.show   // 这里 ！ 符号的作用是，如果是true就变为false，如果是false就变为true
            }
        }
    })
</script>
# 简写为：
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            myclick() {
                this.show=!this.show
            }
        }
    })
</script>
posted @ 2023-04-04 16:48  树苗叶子  阅读(96)  评论(0)    收藏  举报