您现在的位置：首页 >> 前端 >> 内容

vuev-on指令处理用户输入实例

时间：2018/1/18 15:12:29 点击：

　　核心提示：为了让用户和你的应用程序进行交互v-on 指令来增加事件监听器，触发事件后会调用 Vue 实例中 methods 下定义的方法p id=app5p{{messa_ge}}/pbutton v-on:...

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

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 来处理，你所编写的代码只需要关注于底层逻辑。