v-on:click 处理用户输入

为了让用户和你的应用进行互动,我们可以用 v-on 指令绑定一个事件监听器,通过它调用我们 Vue 实例中定义的方法:

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

js部分:

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

这个逆转消息点击后会把 message里面的内容倒过来
主要是要表达的是v-on:click="reverseMessage"的绑定事件

HTTPROOT | 自学PHP | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 石头哥 |微信小程序 |木讯 |备案号:京ICP备17015498号
Copyright © 1998 - 2016 HTTPROOT.COM. All Rights Reserved httproot.com 版权所有