vue.js - vue2上的es6语法疑问

问题描述

问 题

在学习使用vuex的时候遇到问题，不过细看似乎只是跟vue有点关联

这是一个组件上的代码

<template>
  <div class="to-do-list">
    <TodoItem v-for='todo in filterTodos' :item="todo"></TodoItem>
  </div>
</template>

<script>
import TodoItem from './TodoItem'
import {mapGetters} from 'vuex'

const filters = {
  'all': 'all',
  'done':'done',
  'undone':'undone'
};

export default {
  name: 'TodoList',
  data:function(){
    return {
      visiableType:'all',
      filters:filters
    }
  },
  created:function(){

  },
  components: {TodoItem},
  computed:{
    filterTodos (){//vue文档上关于v-for的in后面可以用表达式这块没咋描述到，但是看vuex的example确实可以这么用
     // this.filters[this.visiableType] = 'all'
      return this[this.filters[this.visiableType]];
    },
    all (){
      return this.$store.state.todos;
    },
    ...mapGetters({
      done: 'doneTodos',
      undone:'undoneTodos'
    })
  }
}
</script>

这里语法不是说等同于 function么？（这是es6语法我知道。麻烦仔细看问题哈）

 filterTodos (){
 }

//等同于  filterTodos:function(){}

不过我的主要疑问是 例子里 filterTodos和all，似乎当成object来看待了。

原本在 filterTodos的实现里，我是想做到 return this['all']()这样子的，但结果报错，输出all是一个object而非函数

请问有哪些文档有说明这块语法呢？

---- update ----
才反应过来，computed的解释

Here we have declared a computed property reversedMessage. The function we provided will be used as the getter function for the property vm.reversedMessage

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

这个是 ES6 的语法，并不是 Vue 独有的。是 ES6 的对象中方法的写法，省略了 function 关键字。

详细文档参考：http://es6.ruanyifeng.com/#do...

这篇关于vue.js - vue2上的es6语法疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！