>

인트로 페이지에 사이트에 오늘 날짜를 표시하고 싶습니다. 바닐라 JS는 산들 바람이지만 vue가 더 어려워서 작동시킬 수 없으며 내가 뭘 잘못하고 있는지 전혀 모른다. vue CLI를 사용하고 있습니다. 코드는 다음과 같습니다.

HTML

<template>
    <div class ="date">
      Today is {{ date[0] }} of {{ date[1]}}
    </div>
</template>

JS

export default {
  data:function(){
    return{
      date:[]
    }
  },
  computed:{
    getTodaysDate(){
    var days=["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]
    var months = ["January","February","March","April","May","June","July","August","September","October","November","December"]
    var todaysDate = new Date();
    this.date[0] = days[todaysDate.getDay() -1];
    this.date[1] = months[todaysDate.getMonth() +1]
    return this.date
    }
  }
}

  • 답변 # 1

    질문에서 배열 기반 날짜와 템플릿을 유지하면 다음과 같이 구현 될 수 있습니다.

    const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
    const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
    new Vue({
      el: '#app',
      data () {
        const todaysDate = new Date()
        const day = days[todaysDate.getDay()]
        const month = months[todaysDate.getMonth()]
        return {
          date: [day, month]
        }
      }
    })
    
    

    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <div id="app">
      <div class ="date">
        Today is {{ date[0] }} of {{ date[1] }}
      </div>
    </div>
    
    

    여기서 계산 된 속성이 필요하지 않습니다. data 에서 값을 채울 수 있습니다. .

    계산 된 속성에는 부작용이 없어야하므로 this.date 설정  계산 된 속성 내부는 잘못된 사용법으로 간주됩니다. 계산 된 속성을 사용하려면 관련 값을 반환하고 템플릿에서 직접 사용하면됩니다.

    다음과 같이 보일 수 있습니다 :

    const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
    const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
    new Vue({
      el: '#app',
      computed: {
        date () {
          const todaysDate = new Date()
          const day = days[todaysDate.getDay()]
          const month = months[todaysDate.getMonth()]
          return [day, month]
        }
      }
    })
    
    

    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <div id="app">
      <div class ="date">
        Today is {{ date[0] }} of {{ date[1] }}
      </div>
    </div>
    
    

    그러나 계산에 반응 데이터를 사용하지 않기 때문에 실제로는 계산 속성을 사용할 필요가 없습니다.

    참고 또한 getDay() 와 일치하도록 일요일에 시작하도록 요일 배열을 변경했습니다. . 나는 또한 +1 를 제거했습니다 / -1  값이 잘못 될 수 있습니다.

관련 자료

  • 이전 reactjs - 언제 새로운 React 컴포넌트를 작성해야합니까?
  • 다음 파이썬 프록시 요청 및 사용자 에이전트