时间戳

首页 > 解决方案 > 从数据库中获取渲染数据的前两个字符

vue.js - 从数据库中获取渲染数据的前两个字符

问题描述

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

<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>

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

输出数据为：

monday wednesday thursday

但我希望它呈现为M W Th.

标签： vue.js

解决方案

花括号之间的内容是javascript。所以你应该可以使用这个：

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

这将使字符串的字符 0（包含）到字符 2（排除）。更多关于子字符串函数here

这是一个有效的JSFiddle，使用您的代码

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

"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
    }
},

推荐阅读