vue事件绑定v-on v-model

1.事件绑定v-on和methods属性

有两种事件操作的写法，@事件名 和 v-on:事件名

<button v-on:click="num++">按钮</button>   <!-- v-on 是vue1.x版本的写法 -->
<button @click="num+=5">按钮2</button>

 

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="xx">
<!--    <button @click="num++">+1</button>  直接操作数据属性 -->
    <button @click="num=num+10">+10</button>  <!-- 直接操作数据属性 -->
    <h1>{{num}}</h1>
</div>



</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#xx',  // #xx   css选择器
        data(){
            return {
                num:100,
            }
        },
        methods:{

        }

    })


</script>

</html>

总结:

1. 使用@事件名来进行事件的绑定
语法：
<h1 @click="num++">{{num}}</h1>

2. 绑定的事件的事件名，全部都是js的事件名：
@submit ---> onsubmit
@focus ---> onfocus
....

2. v-model 双向事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="xx">
    <input type="text" v-model="num">

    <h1>{{num}}</h1>

</div>

</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#xx',  // #xx   css选择器
        data(){
            return {
                num:10,
            }
        },
        methods:{
            jian(){
                if (this.num>0){
                    this.num--;
                }

            }
        }

    })


</script>

</html>

图解:

 

posted @ 2021-04-11 21:53  urls  阅读(198)  评论(0)  编辑  收藏  举报