vue v-on指令 处理用户输入

为了让用户和你的应用程序进行交互
v-on 指令 来增加事件监听器,触发事件后会调用 Vue 实例中 methods 下定义的方法

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

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

猜你喜欢

转载自blog.csdn.net/qq_35327397/article/details/79091411