vue指令v-on：绑定事件

最新推荐文章于 2024-07-19 10:52:30 发布

天鱼地潜

最新推荐文章于 2024-07-19 10:52:30 发布

阅读量326

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_65027670/article/details/126725394

版权

Vue 事件绑定方法 click事件 JavaScript

关键词由CSDN通过智能技术生成

此指令是为了绑定事件

基本逻辑

在选择的节点标签里：

@ 点击事件 = “ 方法名” {推荐简化的逻辑}

方法是写在js部分的methods，里面可以放入多个方法

该方法的基本逻辑

methods{

方法名：function（）{..........方法逻辑........}

}

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
<!--    <input type="button"   value="点击按钮可以打招呼" @click="cli">-->
//方法1 简化版
    <input type="button"   value="点击按钮可以打招呼"   v-on:click="cli">
//方法2  完整版
</div>

</body>
<!--vue开发环境配置，，，必须要有，没有就会无法运行vue-->
<script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>
<script>
    var app1=new Vue({
    el:"#app",
    methods:{
        cli:function (){
            alert("你好世界")} }
    })

</script>
</html>