我想在 vuejs 中确定当天的活动选项卡

Question

我的 vuejs 页面中有 7 个选项卡，我的目的是在当天激活选项卡，所以如果今天是星期五，那么特定选项卡应该在第一次加载时激活，但我卡住了，无法导航对于其他选项卡，仅激活活动选项卡而不激活 if else 语句后的其他选项卡，那么当我单击它时我应该如何激活其他选项卡而不仅仅是在今天激活它

<template>

  <div>
    <div id="tabs" class="container">
      <div class="tabs">
        <a v-on:click="timestamp = 1"
           v-bind:class="[timestamp === 1 ? 'active' : '' ]">Friday</a>
          <a
            v-on:click="timestamp = 2"
            v-bind:class="[timestamp === 2 ? 'active' : '']"
            >Thursday</a>
          <a
            v-on:click="timestamp = 3"
            v-bind:class="[timestamp === 3 ? 'active' : '']"
            >Wednesday</a>
          <a
            v-on:click="timestamp = 4"
            v-bind:class="[timestamp === 4 ? 'active' : '']"
            >Tuesday</a>
          <a
            v-on:click="timestamp = 5"
            v-bind:class="[timestamp === 5 ? 'active' : '']"
            >Monday</a>
          <a
            v-on:click="timestamp = 6"
            v-bind:class="[timestamp === 6 ? 'active' : '']"
            >Sunday</a>
          <a
            v-on:click="timestamp = 7"
            v-bind:onClick="[timestamp === 7 ? 'active' : '']"
            >Saturday</a>
        </div>

        <div class="content">
          <div v-if="timestamp === 1 " class="tabcontent">
        </div>

        <div v-if="timestamp === 2" class="tabcontent">
          Content for tab two
        </div>
        <div v-if="timestamp === 3" class="tabcontent">
          Content for tab three
        </div>
        <div v-if="timestamp === 4" class="tabcontent">
          Content for tab three
        </div>
        <div v-if="timestamp === 5" class="tabcontent">
          Content for tab three
        </div>
        <div v-if="timestamp === 6" class="tabcontent">
          Content for tab three
        </div>
        <div v-if="timestamp === 7" class="tabcontent">
          Content for tab three
        </div>

      </div>
    </div>

</template>

<script>

  import moment from 'moment';

  export default {
    data: function() {

         return {
           activetab:'',
           pageName: 'MB',
           pageDescription: 'This is MB',

        data: {
        timestamp : '',
         activetab:''
       },

   }
    },
    
    
    name: 'mb',
    
    computed: {
      timestamp : function() {
        if ( moment().format('dddd') === "Saturday"){
          return 7
         } else if ( moment().format('dddd') === "Sunday") {
          return 6
        }else if ( moment().format('dddd') === "Monday") {
          return 5
        }else if ( moment().format('dddd') === "Tuesday") {
          return 4
        }else if ( moment().format('dddd') === "Wednesday") {
          return 3
        }else if ( moment().format('dddd') === "Thursday") {
         return 2
       }else if ( moment().format('dddd') === "Friday"){
         return 1

      } else (moment().format('dddd') === "hassan")
       return 2
    }
   },
  };

</script>

Answer 1

您正在尝试为没有 setter 的计算值赋值。我认为最简单的方法是将初始逻辑放在 created 挂钩中并分配给变量 timestamp

（也许 switch 在这种情况下有这么多 if）

<script>
import moment from 'moment';
export default {
  data: function() {
    return {
       activetab:'',
       pageName: 'MB',
       pageDescription: 'This is MB',
       timestamp: 1,
       data: {
         timestamp : '',
         activetab:''
       }
     }
  },
  name: 'mb',
  created() {
    if ( moment().format('dddd') === "Saturday"){
      this.timestamp = 7
    } else if ( moment().format('dddd') === "Sunday") {
      this.timestamp = 6
    } else if ( moment().format('dddd') === "Monday") {
      this.timestamp = 5
    } else if ( moment().format('dddd') === "Tuesday") {
      this.timestamp = 4
    } else if ( moment().format('dddd') === "Wednesday") {
      this.timestamp = 3
    } else if ( moment().format('dddd') === "Thursday") {
      this.timestamp = 2
    } else if ( moment().format('dddd') === "Friday"){
      this.timestamp = 1
    } else (moment().format('dddd') === "hassan")
      this.timestamp = 2
  }
}
</script>

我想在 vuejs 中确定当天的活动选项卡

I want to determine active tabs by the current day in vuejs

javascript

tabs

momentjs

vue.js