Vue处理用户输入

青旅半醒 2021-10-19 23:52 379阅读 0赞

处理用户输入

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

  1. <div id="app-5">
  2.   <p>{
  3.    {message}}</p>
  4.   <button v-on:click="reverseMessage">反转消息</button>
  5. </div>
  7. var app5 = new Vue({ 
  8.   el: '#app-5',
  9.   data: { 
  10.     message: 'Hello Vue.js!'
  11.   },
  12.   methods: { 
  13.     reverseMessage: function () { 
  14.       this.message = this.message.split('').reverse().join('')
  15.     }
  16.   }
  17. })

  注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

  Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

  1. <div id="app-6">
  2.   <p>{
  3.    { message }}</p>
  4.   <input v-model="message">
  5. </div>
  7. var app6 = new Vue({ 
  8.   el: '#app-6',
  9.   data: { 
  10.     message: 'Hello Vue!'
  11.   }
  12. })

发表评论

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

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

相关阅读

    相关 Vue处理用户输入

    处理用户输入   为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法： <div id="app

    青旅半醒青旅半醒/ 0 赞/ 380 阅读