番外篇：VUE（二）点击事件 v-on:click

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

el:绑定元素
data：封装数据
methods：封装方法

1、点击事件绑定:v-on:click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--1:引入vue.js-->
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!--3:点击事件绑定 v-on:click-->
    <div id="div1">
        <input type="button" value="点赞+1" v-on:click="num++" />
        <h2>有{{num}}人为你点赞</h2>
    </div>
    <script>
        //2、定义一个vue对象
        //el 表示控件的id，data 表示要渲染的数据
        let hello = new Vue({
            el: "#div1",
            data: {
                num: 1
            }
        });
    </script>
</body>
</html>

2、vue定义函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--1:引入vue.js-->
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!--3:点击事件绑定 v-on:click-->
    <div id="div1">
        <input type="button" value="点赞-1" v-on:click="cancle()" />
        <h2>有{{num}}人为你点赞</h2>
    </div>
    <script>
        //2、定义一个vue对象
        //el 表示控件的id，data 表示要渲染的数据,methods 表示定义方法
        let hello = new Vue({
            el: "#div1",
            data: {
                num: 10
            },
            methods:{
                //取消点赞方法
                cancle(){
                    this.num--
                }
            }
        });
    </script>
</body>
</html>

以上是 番外篇：VUE（二）点击事件 v-on:click 的全部内容， 来源链接： utcz.com/z/380054.html

回到顶部