站内搜索:
首页 >> 前端 >> 内容
vuev-on指令处理用户输入实例

时间:2018/1/18 15:12:29

为了让用户和你的应用程序进行交互

v-on 指令 来增加事件监听器,触发事件后会调用 Vue 实例中 methods 下定义的方法

<p id="app5">
            <p>{{messa_ge}}</p>
            <button v-on:click="reverseMessage()">翻转文字hello Vue!</button>
        </p>

        <script type="text/javascript">
            new Vue({
                el: '#app5',
                data: {
                    messa_ge: 'Hello Vue.js!'
                },
                methods: {
                    reverseMessage: function() {
                        this.messa_ge = this.messa_ge.split('').reverse().join('')
                    }
                }
            })
        </script>

reverseMessage 方法中,更新了应用程序的状态,而无需触及 DOM ,所有的 DOM 操作都由 Vue 来处理,你所编写的代码只需要关注于底层逻辑。

  • 上一篇:vue条件与绑定实例
  • 下一篇:盒子模式代码实例
  • 返回顶部