zoukankan      html  css  js  c++  java
  • VUE学习五,应用交互v-on

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

    一、示范代码

    <div id="app-5">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">反转消息</button>
    </div>
    var app5 = new Vue({
      el: '#app-5',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })

    二、效果如下图所示

     单击后:

     三、整体代码参考

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>VUE简单示范</title>
    <script type="text/javascript" src="../js/vue.min.js" charset="utf-8"></script>
    </head>
    <body>
    <!--用 v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法//-->
    <div id="app-5">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">反转消息</button>
    </div>
    <script>
    var app5 = new Vue({
      el: '#app-5',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
    </script>
    </body>
    </html>
    View Code

    本文参考:

    https://cn.vuejs.org/v2/guide/

  • 相关阅读:
    20162302
    20162302
    20162302 实验三《敏捷开发与XP实践》实验报告
    20162302 第九周作业
    20162302 第八周作业
    20162302 实验二《面向对象程序设计》实验报告
    20162302 第七周作业
    项目Alpha冲刺Day8
    项目Alpha冲刺Day7
    项目Alpha冲刺Day5
  • 原文地址:https://www.cnblogs.com/nayitian/p/14983254.html
Copyright © 2011-2022 走看看