vue-프로젝트 코스피, 나스닥(7일차)

할일
1. 코스피 나스닥 데이터 가져오기

내일 할일
1. api 공부
http://blog.naver.com/PostView.nhn?blogId=hannimboy&logNo=221167418861&parentCategoryNo=9&categoryNo=&viewDate=&isShowPopularPosts=false&from=postList
2. 상승, 하락 구분해서 color 화살표 이미지 넣기, 상승일때 color 빨간색, 하락일때 color 파란색
3. 코드 정리하기
4. 비트코인 데이터 가져오기

메인 화면에 코스피, 나스닥 데이터 표시하기

<template>

  <div class="daily">
    <div>
      {{koreaPrice}}
    </div>
    <div>
      {{koreaChange}}
    </div>
    <div v-if="koreaCheck === '상승'">
      {{koreaCheck}} +
      {{koreaPercent}}
    </div>
    <div v-if="koreaCheck === '하락'">
      {{koreaCheck}}
      {{koreaPercent}}
    </div>

    <hr>

    <div class="daily">
      <div>
        {{americaPrice}}
      </div>
      <div>
        {{americaChange}}
      </div>
      <div v-if="americaCheck === '상승'">
        {{americaCheck}} +
        {{americaPercent}}
      </div>
      <div v-if="americaCheck === '하락'">
        {{americaCheck}}
        {{americaPercent}}
      </div>
    </div>

  </div>
</template>

<script>
var axios = require('axios')
var cheerio = require('cheerio')

export default {
  data() {
    return {
      loaded: false,
      koreaPrice: '',
      koreaChange: [],
      koreaCheck: '',
      koreaPercent:'',

      americaPrice: '',
      americaChange: [],
      americaCheck: '',
      americaPercent: '',
    }
  },
  methods: {
    koreaData(){
      axios.get('https://finance.naver.com/sise/sise_index.nhn?code=KOSPI')
      .then(res => {
        var $ = cheerio.load(res.data)
        this.loaded = true
        // 코스피 현재 가격
        this.koreaPrice = $('#now_value').text().split(',')
        this.koreaPrice = parseFloat(this.koreaPrice[0]+this.koreaPrice[1])

        // 코스피 수치 증감
        var beforeFilter = $('#change_value_and_rate > span').text()
        this.koreaChange = parseFloat(beforeFilter.substring(0,(beforeFilter.length-2)))

        // 코스피 상승, 하락 구분
        this.koreaCheck = beforeFilter.substring((beforeFilter.length-2), (beforeFilter.length))
        if(this.koreaCheck === '상승'){
          this.koreaCheck = '하락'
        } else if(this.koreaCheck === '하락'){
          this.koreaCheck = '상승'
        }

        // 코스피 전날 대비 증감% - ((현재가-전일종가)/전일종가 * 100).
        // this.koreaPercent = parseFloat(this.koreaChange)/parseFloat(this.koreaPrice)
        if(this.koreaCheck === '하락'){
          this.koreaPercent = ((this.koreaPrice-(this.koreaPrice+this.koreaChange)) / (this.koreaPrice + this.koreaChange)*100).toFixed(2)
        } else if(this.koreaCheck === '상승'){
          this.koreaPercent = ((this.koreaPrice-(this.koreaPrice-this.koreaChange)) / (this.koreaPrice - this.koreaChange)*100).toFixed(2)
        }

      })
    },
    americaData(){
      axios.get('https://finance.naver.com/world/sise.nhn?symbol=NAS@IXIC')
      .then(res => {
        var $ = cheerio.load(res.data)
        this.loaded = true
        // 나스닥 현재 가격
        this.americaPrice = $('#content > div.rate_info > div.today > p.no_today > em').text().split(',')
        this.americaPrice = parseFloat(this.americaPrice[0]+this.americaPrice[1])

        // 나스닥 수치 증감
        this.americaChange = $('#content > div.rate_info > div.today > p.no_exday > em:nth-child(2)').text()
        this.americaChange = parseFloat(this.americaChange)

        // 나스닥 상승, 하락 구분
        var beforeCheck = $('#content > div.rate_info > div.today > p.no_exday > em:nth-child(3) > span.ico.plus').text()

        if(beforeCheck === '+'){
          this.americaCheck = '상승'
        } else if (beforeCheck === '-'){
          this.americaCheck = '하락'
        }
        // this.americaCheck = beforeFilter.substring((beforeFilter.length-2), (beforeFilter.length))

        console.log(this.americaPrice)
        console.log(this.americaChange)
        console.log(this.americaCheck)

        // 코스피 전날 대비 증감% - ((현재가-전일종가)/전일종가 * 100).
        // this.koreaPercent = parseFloat(this.koreaChange)/parseFloat(this.koreaPrice)
        if(this.americaCheck === '하락'){
          this.americaPercent = ((this.americaPrice-(this.americaPrice+this.americaChange)) / (this.americaPrice + this.americaChange)*100).toFixed(2)
        } else if(this.americaCheck === '상승') {
          this.americaPercent = ((this.americaPrice-(this.americaPrice-this.americaChange)) / (this.americaPrice - this.americaChange)*100).toFixed(2)
        }

      })
    }
  },
  mounted(){
    this.koreaData()
    this.americaData()
  },
}
</script>

<style scoped>

</style>