1. v-on可以侦听事件,它也可以简写为@+事件

1.1 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on</title>

</head>
<body>

    <div id="app">

        <!-- v-on可以侦听事件 -->

        <!-- 原来写法的点击事件 -->
        <!-- <button onclick="">点击</button> -->

        <!-- Vue写法的点击事件 -->
        <button v-on:click="myClick">v-on的点击</button>
        <!-- 当鼠标移动到按钮上触发的事件 -->
        <button v-on:mouseover="myClick">将鼠标移动到按钮上触发</button>
        <!-- v-on可以简写为'@'符号 -->
        <button @click="myClick">v-on简写的点击</button>
        <h1>
            {{title}}
        </h1>

        <!-- 简单的数字(加 或 减) -->
        <button @click="sub">-</button>
        <button @click="add">+</button>
        <h3>{{num}}</h3>

        <!-- 简单的轮播图 -->
        <img :src="'./imgs/img'+num+'.jpg'" alt="">
    </div>


    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                title:"web前端开发",
                num:1
            },
            //定义方法的属性(里面放各种的方法)
            //所有的函数或者方法全在methods属性中定义
            methods: {
                myClick: function(){
                    this.title = "Vue学习"
                },
                sub: function(){
                    if(this.num == 1){
                        return
                    }else {
                        this.num--;
                    }
                },
                add: function(){
                    if(this.num == 2){
                        return
                    }else {
                        this.num++;
                    }
                }
            }
        })
    </script>
  
</body>
</html>

1.2 显示效果

1.3 在线演示

点击下面链接,即可在线运行

http://www.68yun.top/demo/vue/1.6.html

最后修改:2021 年 02 月 20 日
如果觉得我的文章对你有用,请随意赞赏