2020/9/9 vue学习笔记———处理用户输入

处理用户输入

**要实现与用户的互动，在vue中需要用v-on指令绑定一个事件监听器，通过这个事件监听器来调用vue中定义的方法。**与原生绑定不同，原生绑定直接使用onclick或.click
接下来写一个小案例，设置一个按钮，点击按钮使得页面内容实现反转
Html：

<div class="app">
        <h1 v-if="kejian">{{msg}}</h1>
        //v-if条件指令来设置是否可见
        <input type="button" v-on:click="fanzhuan" value="fanzhuan"/>
        //用v-on来绑定一个事件
</div>

Js：

var vm=new Vue({
        el:".app",
        data:{
            msg:"abc!",
            kejian:true//true为可见，false为不可见
        },
        methods:{
            fanzhuan:function(){
               this.msg=this.msg.split("").reverse().join("");
            }
        }
});

如何理解上述出现的methods？

method
美: ['meθəd]
英: ['meθəd]
n. 方法；办法；措施；条理

在我们学习过程中，对象才会有属性和方法。为了便于理解，将对象的方法看作函数即可。
所以在此处将view-model部分看作一个对象，methods部分就是他的方法。

接下来我们来看一下运行效果：

点击"fanzhuan"按钮