Vue JS - 如何将颜色应用于数组中特定元素的文本然后删除最后一个逗号

Question

我正在使用日期，用户选择日期，然后选择的日期显示在浏览器中，问题是我想更改最后两项的颜色，除了删除最后一个逗号

我用splice去掉了第一个字，但是我不能去掉最后一个逗号，也就是说，在五月的那一刻，日期是这样的

请注意，我不需要更改日期，我只需要更改最后两个字的颜色并删除逗号

我想得到如下结果

    <date-pick
        v-model="date"
        :format="format"
        :parseDate="parseDate"
        :formatDate="formatDate">

    <template v-slot:default="{toggle, inputValue}">
        <div class="mount-container">
          <h1><span ref="mount" class="mount-title">
            {{ inputValue.split(' ').splice(0,3).join(' ') }}
          </span></h1>
        </div>
    </template>

   </date-pick>

我不知道你有多需要它，但我想留一个link给我用的npm package the date如果你需要更多的代码或信息，写我一定会提供

已编辑

我想用这个方法，但没用

  mounted() {
    let mount = this.$refs.mount.split(' ').pop();
    mount.style.color = 'yellow'
  },

但有趣的是，如果我在没有 split 的情况下应用颜色，那么它会起作用。

  mounted() {
    let mount = this.$refs.mount;
    mount.style.color = 'yellow'
  },

Answer 1

要删除最后一个逗号，只需将 date 格式更新为 date: fecha.format(new Date(), "dddd, MMMM Do YYYY")。

要更改颜色，请将模板中的 span 标签更新为：

<h1>
    <span ref="mount" class="mount-title">
        {{ inputValue.split(" ").splice(0, 1).join(" ") }}
    </span>
    <span>
        {{ inputValue.split(" ").splice(1, 2).join(" ") }}
    </span>
</h1>

Answer 2

我的问题第一次出现这种情况时，他们通过向 codepen 指定 link 来正确回答，然后，正如我假设的那样，这个人删除了他们的正确答案:)，但我设法保存了那个link 来自 codepen

<div id="app">
    <div class="red">{{ inputValue }}</div>
    <div><span class="red">{{ inputValue.match(/^([A-z]+) /i)[1] }}</span>, <span>{{ inputValue.match(/^.+ ([A-z]+) /i)[1] }} {{ inputValue.match(/ (\d{1,2}).+,/)[1] }}</span></div>
</div>

div {
  font-family: 'Fjalla One', sans-serif;
  font-size: 30px;
}
.red {
  color: #CA0340;
}

Answer 3

您可以将 format 和 date 属性更新为您需要的格式（即 dddd, MMMM D），而不是尝试解析日期字符串：

export default {
  data() {
    return {
      format: "dddd, MMMM D",
      date: fecha.format(new Date(), "dddd, MMMM D"),
    };
  },
  //...
}

然后，您可以在逗号上拆分字符串以获得 星期几 和日期部分，应用 CSS class每个部分：

<span class="mount-title">
  <span class="dow">{{ inputValue.split(",")[0] }}, </span>
  <span class="date">{{ inputValue.split(",")[1] }}</span>
</span>

然后为 date 添加样式 class:

<style>
.date {
  color: #000;
}
</style>

demo

Vue JS - 如何将颜色应用于数组中特定元素的文本然后删除最后一个逗号

Vue JS - How to apply color to text of specific element from array then remove last comma

javascript

arrays

array-splice

vue.js