GuLi商城-前端基础Vue指令v-on

系统管理员 2024-03-24 18:21 22阅读 0赞

![66f76bfbc4884eb08b1a23df8628bb9a.png][]

![6f2491353a934b2b904df394fecf35fb.png][] ![e99f50c32e38444e994e16717a8fb7db.png][]![a653616b3e604625883293be6ed32529.png][]

![9d5284b70dfa431f991c14efbe463323.png][]![bd5142bce3ea4072b0991e1e698e6936.png][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
                    
            
            <button v-on:click="num++">点赞</button>
            
            <button @click="cancle">取消</button>
            
            <h1>有{
       {num}}个赞</h1>
    
    
            
            <div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
                大div
                <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
                    小div <br />
                    <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
                </div>
            </div>
    
    
    
            
            <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br />
    
            提示：
    
        </div>
        <script src="../node_modules/vue/dist/vue.js"></script>
    
        <script>
            new Vue({
                el:"#app",
                data:{
                    num: 1
                },
                methods:{
                    cancle(){
                        this.num--;
                    },
                    hello(){
                        alert("点击了")
                    }
                }
            })
        </script>
    </body>
    
    </html>

![691655e1ad6942b18c507ecdc3302244.png][]

[66f76bfbc4884eb08b1a23df8628bb9a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/4f498bc81834406099d00a37748a9fe9.png
[6f2491353a934b2b904df394fecf35fb.png]: https://img-blog.csdnimg.cn/6f2491353a934b2b904df394fecf35fb.png
[e99f50c32e38444e994e16717a8fb7db.png]: https://img-blog.csdnimg.cn/e99f50c32e38444e994e16717a8fb7db.png
[a653616b3e604625883293be6ed32529.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/50e319f3fbe54c5480be59669588e90b.png
[9d5284b70dfa431f991c14efbe463323.png]: https://img-blog.csdnimg.cn/9d5284b70dfa431f991c14efbe463323.png
[bd5142bce3ea4072b0991e1e698e6936.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/bfd5eedf3d064fcab5b586d4163b5fc4.png
[691655e1ad6942b18c507ecdc3302244.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/d94e1bf17fcc4a6e8d2a0b24fc3c6e84.png