Vue v-on 指令

来自姬鸿昌的知识库
Jihongchang（讨论 | 贡献）2023年6月7日 (三) 09:59的版本
跳到导航 跳到搜索

为元素绑定事件

<div id="app">
 <input type="button" value="事件绑定" v-on:事件名="方法">
 <input type="button" value="事件绑定" v-on:click="方法">
 <input type="button" value="事件绑定" v-on:monseenter="方法">
 <input type="button" value="事件绑定" v-on:dblclick="方法">
 <input type="button" value="事件绑定" v-on:dblclick="doIt">
 <input type="button" value="事件绑定" @dblclick="doIt">
</div>

var app = new Vue({
  el:"#app",
  methods:{
    doIt:function(){
      //逻辑
    }
  }
})

<!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>v-on指令基础</title>
</head>
<body>
    <!-- 2.html 结构-->
    <div id="app">
        <input type="button" value="v-on指令" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="v-on双击" @dblclick="doIt">
        <h2 @click="changeFood">{{ food }}</h2>
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            food:"西红柿炒鸡蛋"
        },
        methods:{
            doIt:function(){
                alert("hello world");
            },
            changeFood:function() {
                //console.log(this.food);
                this.food+="很好吃！"
            }
        }
    })
</script>
</body>
</html>

总结

  • v-on 指令的作用是：为元素绑定事件
  • 事件名不需要写 on
  • 指令可以简写为 @
  • 绑定的方法定义在 methods 属性中
取自“https://www.jihongchang.top/index.php?title=Vue_v-on_指令&oldid=6954”