홈>2020-02-01 01:33

vue.js - 날짜 표시를위한 Vue 계산 속성

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

HTML

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

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

vue.js

답변 # 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 값이 잘못 될 수 있습니다.

Python2.net

vue.js - 날짜 표시를위한 Vue 계산 속성

관련 자료