Vue指令、语法糖、事件

指令：带v-的
语法糖就是缩写

<button  v-on:click="handleClose">隐藏</button>
<button  @click="handleClose">隐藏</button>
<a v-bind:href="url">链接</a>
<a :href="url">链接</a>
<img v-bind:src="url">
<img :src="url">

事件实例

image.png

image.png

 <div id="app">
       <p v-if="show">点击按钮隐藏</p>
       <button  @click="handleClose">隐藏</button>
</div>

方式一

<script> 
        var app=new Vue({
            el:"#app",
            data:{
                show:true
            },
            methods:{
                handleClose:function(){
                    this.close();
                },
                close:function(){
                    this.show=false;
                }
            }
        })
    </script>

方式二

<script> 
        var app=new Vue({
            el:"#app",
            data:{
                show:true
            },
            methods:{
                handleClose:function(){
                    this.show=false;
                }
            }
        })
    </script>

方式三

<div id="app">
       <p v-if="show">点击按钮隐藏</p>
       <button  @click="show=false">隐藏</button>
</div>
<script> 
        var app=new Vue({
            el:"#app",
            data:{
                show:true
            }
        })
    </script>

欢迎大神加入群聊:467637093共同进步