vue.js - V-代表 ="item in items"。在计算属性中使用 "item"

Question

这是我的代码:

 <div v-for="list in getList" :key="list.id" class="tab">
        <h3>{{day(list)}}</h3>
        <div class="details">
            <img :src="require('../assets/day.svg')" alt="icon">
            <h4 class="description">{{list.weather[0].description}}</h4>
            <h4 class="max-temp">{{list.temp.max}}°C</h4>
            <h4 class="min-temp">{{list.temp.min}}°C</h4>
        </div>
    </div>

和我的脚本:

day(arg) {
  var timestamp = arg.dt;
  var a = new Date(timestamp * 1000);
  var days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
  ];
  return days[a.getDay()];
},

如何使用列表作为参数？或者有没有将“列表”传递给我的计算属性？

Answer 1

计算属性不接受参数，但您可以使用 filter .

在你的组件定义中

filters: {
  weekday (timestamp) {
    let date = new Date(timestamp * 1000)
    return date.toLocaleDateString('en', {weekday: 'long'})
  }
}

在你的模板中

<h3>{{ list.dt | weekday }}</h3>

过滤器比方法更可取，因为方法会在每个渲染周期运行。参见 https://v2.vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods