Vue学习系列(七):Vue的v-on指令

Vue学习系列:
上一篇:Vue学习系列(六):使用IDEA开发Vue是v-开头指令爆红解决方法

在Vue中,v-开头的指定都是和Vue相关的,其中v-bind是用来绑定标签属性的,而v-on是用来绑定DOM事件的,比如点击,提交等等DOM事件。

【注意】在Vue中,v-bind可以简写成:,而v-on同样可以简写成为@标志。


<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="../../js/vue.js">script>
head>
<body>
    <div id="app">
        <button v-on:click="doChange">{{message}}button>
        
        <button @click="doChange">{{message}}button>
    div>
body>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isDisplay: true,
            message: '点击一下,我隐藏了'
        },
        methods:{
            doChange: function(){
                if(this.isDisplay){
                    this.message = '点击一下,我出现了';
                    this.isDisplay = false;
                }else {
                    this.message = '点击一下,我隐藏了';
                    this.isDisplay = true;
                }
            },
        }
    })
script>
html>

你可能感兴趣的:(前端,vue,js,javascript)