Question

如何从数据库中获取渲染数据的前两个字符？

<div v-for="(schedule,index) in DailySchedule" v-bind:key="index">
  <span class="days-div"> 
    <span class="day" v-for="(days,index) in schedule" v-bind:key="index.id">
      <span v-for="(day,index) in days" v-bind:key="index.id" >
        {{day.day}} 
      </span>
    </span>
  </span>   
<div>

数据声明： “数据”：[ { “ id”：2 “天”： [ { “ id”：12 “ day”：“星期一”， “ start_time”：“ 10:00:00”， }， { “ id”：13 “ day”：“星期二”， } ]

输出数据为：

monday wednesday thursday

但是我希望将其呈现为M W Th。

Answer 1

大括号之间是javascript。因此，您应该可以使用：

{{day.day.substring(0, 2)}}

这会将字符串的字符0（包括）带到字符2（排除）。有关子字符串函数here

的更多信息

Here is a JSFiddle that works, using your code

更新： 您发布了以下数据：

"data":[
    {
       "id":2,
       "days":[
           {
              "id":12,
              "day":"monday",
              "start_time":"10:00:00",
           },
           {
              "id":13,
              "day":"tuesday",
           }
       ]

我想它是不完整的，因为后面有逗号。但是据此推断，如果您想循环浏览这些日子，您的<template>部分应如下所示：

  <span v-for="(day,index) in days" v-bind:key="day.id" >
      {{day.day}} 
  </span>

这是因为数据的格式，您的模板中有三个v-for，这意味着您的DailySchedule对象应该存在并且至少三层。还要注意v-bind:key：您声明了index.id但index不是一个对象，它是一个整数，您可以声明index或day.id（因为您的id对象中有一个day字段）

如果这是来自vue.js中数据对象声明的复制粘贴，则还有另一个问题：data应该是这样的function（我更新了小提琴来给您一个例子）：

data: function () {
    return {
        days: [
           {
              "id":12,
              "day":"monday",
              "start_time":"10:00:00",
           },
           {
              "id":13,
              "day":"tuesday",
           }
        ]
        //declare your other variables here
    }
},

Answer 2

您可以像这样使用vue filters：

export default {
    data: () => {
      return { 
      }
    },
    created(){
    },
    filters: {
        truncate: function (text, length, suffix) {
            return text.substring(0, length) + suffix;
        },
    }
}

或

Vue.filter('truncate', function (text, length, suffix) {
    return text.substring(0, length) + suffix;
});

然后像这样使用它：

<span v-for="(day,index) in days" v-bind:key="index.id" >
    {{day.day | truncate(2, '')}} //result would be Mo
    {{day.day | truncate(3, '...')}} //result would be Mon...
</span>

如果您想了解更多的vue过滤器，建议您阅读以下内容：How to Create Filters in Vue.js with Examples

从数据库获取渲染数据的前两个字符

2 个答案: