码迷,mamicode.com
首页 > 其他好文 > 详细

vue--如何实现绑定事件

时间:2020-01-02 22:53:22      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:pre   方法   asc   back   因此   str   接收   hello   不可   

事件处理


 

 

  • 监听事件

 

 

  可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

  

<div id="box1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
<script>
    var practice1 = new Vue({
      el: #box1,
      data: {
        counter: 0
      }
    })  
</script>

 

  • 事件处理方法


  然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。  

<div id="box2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
  el: ‘#example-2‘,
  data: {
    name: ‘Vue.js‘
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert(‘Hello ‘ + this.name + ‘!‘)
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以用 JavaScript 直接调用方法
example2.greet() // => ‘Hello Vue.js!‘

vue--如何实现绑定事件

标签:pre   方法   asc   back   因此   str   接收   hello   不可   

原文地址:https://www.cnblogs.com/mrsdong/p/12141994.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!