vue之v-on事件绑定

淡淡的烟草味﹌ 2022-04-06 17:31 627阅读 0赞

vue之v-on事件绑定demo:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Vue demo</title>
  6.     <!--引入vue 依赖项-->
  7.     <script type="text/javascript" src="js/vue.min.js"></script>
  9. </head>
  10. <body>
  11.     <div id="myVue">
  13.        <button onclick="alert('点你就点你')">点我啊</button>
  14.         <br/>
  16.         <!-- 语法：  v-on:事件属性="方法名"  -->
  18.        <button v-on:click="alert('要的嘛')">再点我啊</button>
  19.         <br/>
  20.         <button v-on:click="sayHello()">又来点我</button>
  21.         <br/>
  22.         <button v-on:click="showMsg('读书')">最后来点我</button>
  23.     </div>
  24.     <script>
  25.         /*定义Vue全局变量*/
  26.         var app = new Vue({
  27.             /* 通过id绑定一个范围 */
  28.             el:"#myVue",
  29.             data:{
  30.                 "name":"helloWord",
  31.                 age:17
  32.             },
  33.             methods:{
  34.                 sayHello:function () {
  35.                     alert("我被点出来了");
  36.                 },
  37.                 showMsg:function (hobby) {
  38.                     alert(this.name+"的年龄是："+this.age+"岁；爱好是："+hobby);
  39.                 }
  40.             }
  41.         });
  42.     </script>
  43. </body>
  44. </html>

结果：
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，627人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue之v-on绑定监听事件

    vue一个重要的指令就是 v-on，它用来绑定监听器 在button按钮上， 使用v-on:click给该元素绑死了一个点击事件 在普通元素上，v-on可以监听原生的DOM

    小咪咪小咪咪/ 0 赞/ 58 阅读