vue学习v-on:click绑定HTML的单击事件

vue学习v-on:click绑定HTML的单击事件

v-on:click缩写为@click

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>125jz.com-vue</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="app">
   <button @click="greet">123</button>
  </div>
  <script>
   var app=new Vue({
    el:"#app",
    data:{
     name:'vue.js!'
    },
    methods:{
     greet:function(){
      alert(this.name+'的方法被调用了!')
     }					
    }
   })
  </script>
 </body>
</html>

v-on指令绑定一个事件监听器,通过它调用VUE实例中定义的方法。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/7199.html

(1)
江山如画的头像江山如画管理团队
上一篇 2020年6月14日 上午9:15
下一篇 2020年6月18日 上午8:22

99%的人还看了以下文章

  • 解决网页中img图片出现多余空白的方案

    网页制作中,不管是table还是DIV+CSS排版时,会遇到浏览器中的图片元素img下出现多余空白的问题,非常常见,如何解决? <table class=”w1024″ border=”0″ cellspacing=”0″ cellpadding=”0″> <tr> <td colspan=”3″> <img src…

    2020年4月16日
    3.6K0
  • 如何给网页中的表格table添加滚动条

    最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了,就想到了给table加滚动条,接下来125建站网为大家介绍HTML给table添加滚动条的方法,有需要的小伙伴可以参考一下: 1、方法分析: 要给table添加滚动条其实很简单,我们首先把table放到一个div里面,然后再设置div显示滚动条即可。 2、html代码: <div…

    2023年3月9日
    1.4K0
  • vue学习-我的第一个vue代码

    创建一个 .html 文件,然后通过如下方式引入 Vue: <!– 开发环境版本,包含了有帮助的命令行警告 –> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script> 或者: <!– 生产环境版本,优化了尺寸和速度 –>…

    2020年6月14日
    2.4K0
  • 第14课:上传网页

    只要你有服务器空间和一个FTP工具就可以在因特网上发布自己的网站了。

    2018年1月18日
    3.6K1
  • 第7课:元素的分类与标识(class和id)

    有时,你希望对特定元素或者特定一组元素应用特殊的样式。在这一课,我们将深入学习如何利用class和id来为所选元素指定属性。 如何实现为网站上许多标题中的某一个单独应用颜色?如何实现把网站上的链接分为不同的类,并对各类链接分别应用不同的样式?这只是本课将解决的诸多问题中的最具代表性的两个问题。 用class对元素进行分类 比方说,我们有两个由链接组成的列表。…

    2020年2月25日
    2.7K0
  • CSS border-radius 深入学习(含可视化生成工具)

    没有学过CSS border-radius 的同学,请阅读《css实现圆角矩形、半圆、圆形效果—border-radius使用详解》一文。border-radius 写法: .box{ border-radius: 30%; /* 也可以用PX代替 */ } 矩形的四角会变为相应数值的圆角,如下图: 只输入一个数值,所有角都会被四舍五入,若要固定值可以使用 …

    2019年10月17日 网页制作
    2.2K0

发表回复

登录后才能评论