Vue选项: Methods方法

在开发中,我们经常需要用到函数, 通过将一些需要复用的逻辑封装在函数里,多次调用这个函数来达到逻辑代码复用的目的.

在vue中,函数被定义成为方法来使用,这些方法定义在methods属性中,然后就可以在vue 表达式中调用函数

1. 定义方法

vue 选项对象中有一个叫methods的属性.这个属性里面专门来存放一些函数,用来给别人调用

const vm = new Vue({    el: "#app",    data: {        status: 2    },    methods: {        // 这里面是用来存放函数,这里面的函数会自动成为vue实例的方法        statusDoing(id){            var doing = ["睡觉","吃饭","学习Vue"];            return doing[id]        }    }})

2. 方法的调用

之前有起到过Mastache语法中可以使用JavaScript表达式,所以我们可以在Mastache语法中调用函数

<div id="app">    {{ statusDoing(status) }}</div>

方法除了可以在Mastache 表达式中使用外,还可以在任何可以使用Javascript表达式中都可以使用,我们慢慢了解

3. 方法中的this指向

在方法中,this指向该方法所属的实例,可以使用this访问data中的属性或者其他方法

<div id="app">    {{ statusDoing() }}</div><script>       const vm = new Vue({        el: "#app",        data: {            status: 2        },        methods: {            statusDoing(){                var doing = ["睡觉","吃饭","学习Vue"]                                // 通过this 获取到实例对象,来拿到data中的数据                return doing[this.status]            }        }    })</script>

注意, 方法不能使用箭头函数,因为箭头函数的this不是Vue实例, 未来我们在方法中可能会大量使用到Vue实例对象中的属性. 比如获取数据,或者调用其他方法, 如果我们使用了箭头函数就会丢失this,只能通过Vue实例对象来获取

详细的部分我们会在事件中提及;

4. 关于方法响应式

使用方法对数据进行过滤

<div id="app">    <!-- 原数组 -->    <h2>原数组</h2>    {{numbers}}    <h2>使用方法过滤后的数组</h2>    {{ filterNum() }}</div><script>       const vm = new Vue({        el: "#app",        data: {            numbers: [10,20,-12,15,-10,22]        },        methods: {            filterNum(){                // 过滤数组函数                return this.numbers.filter((number) => {                       return number >= 15                })                  }        }    })</script>

这个时候改变numbers数据,

vm.numbers = [22,11,13,19,18,10,17]

就会发现, 方法过滤后的数据也发生了变化

所以我们前面讲data属性时提到的数据响应式变化,在方法里同样有效果, 数据变化触发了Vue响应系统, 进而触发函数重新执行.

Vue选项: Methods方法相关推荐

Vue入门 methods方法
methods方法:为什么加s,因为可以定义多个方法 methods选项表示:当前Vue实例可以用到的方法 methods选项的值:对象,对象中定义方法 methods{ //定义时间处理方法show ...
在vue开发中会遇到methods方法里有一个函数嵌套另一个函数，最内层函数this取不到data数据，该怎么解决？
一,问题在vue的methods方法中两个函数互相嵌套,最内层函数this取不到data数据二,原因 this的指向问题三,解决方法 (1)给最外层函数this重新赋值给一个变量 methods ...
在vue中methods互相调用的方法
在vue中methods互相调用的方法转载于:https://www.cnblogs.com/macT/p/10212878.html
vue中的方法 methods 定义时不要使用箭头函数
今天在vue中引入vuex的时候出现了错误,解决了一个多少时,总结如下: vuex 的使用: vuex就是一个状态管里中心也好比一个仓库细分可分为五个部分,这是我不考虑 module 分别是 st ...
解决vue中无法取得methods方法中的return值
解决vue中无法取得methods方法中的return值参考文章: (1)解决vue中无法取得methods方法中的return值 (2)https://www.cnblogs.com/betty- ...
Vue中的methods方法
在 methods 中定义方法我们可以使用 methods 属性给 Vue 定义方法,methods 的基本语法: var vm = new Vue({methods:{// 在此时定义方法,方法之 ...
Vue中的methods方法使用技巧,三分钟迅速读懂
1.methods方法应用场景: 在Vue中,我们需要调用某个方法时,我们需要先将这些方法定义在methods属性中,然后才能在vue 表达式中调用该方法. 2.methods方法的使用方法语法定义 ...
vue的methods中方法写法
vue的methods中存放方法,写法有aaa(){ }和bbb:function(){ } methods:{ // key:value key是方法名,value是function aaa(){ ...
Vue获取methods中方法的return返回值
Vue获取methods中方法的return返回值 1. 遇到的需求需要调用methods中的一个方法直接使用return返回值: 但直接使用return关键字是undefined,无法直接拿到返回 ...

Vue选项: Methods方法

Vue选项: Methods方法相关推荐

最新文章

热门文章