Vue 2:) 연산과 구문 요약

Vue

* 아래 Vue 요약에 작성된 코드는 Vue-CLI, SASS 개발환경 기준입니다.

 

 

2:) 연산과 구문 요약

 

개발 언어가 무엇이던 더하기, 빼기, 곱하기 등의 기본적인 연산자와 조건문을 제공합니다.

Vue도 개발 언어니 뷰 하기 나름의 기본 연산자를 제공하지요.

 

기본 연산

더하기, 빼기, 나누기, 곱하기 등

<template>
  <div>
    <p v-text="12 + 3"></p>
    <p v-text="10 + 3 / 2"></p>
    <p v-text="'2 * ( 15 + 3 ) = ' + 2 * ( 15 + 3 )"></p>
    <p v-text="445 - 1000 + ' ' + oops"></p>

    <a v-bind:href="'http://' + google">{{ text }}</a>
  </div>
</template>

<script>
export default { 
  data() { 
    return { 
      oops: '된다된다',      
      google: 'google.com',
      text: '구글링크'
    } 
  } 
} 
</script>

페이지 렌더링 결과

15

11.5

2 * ( 15 + 3 ) = 36

-555 된다된다

구글링크

 

 

조건문

JS의 축약된 삼항 연산자로 조건문을 사용할 수 있습니다.

<template>
  <div>
    <span v-text="where == house ? '집이군' : '밖이군'"></span>
  </div>
</template>

<script>
export default { 
  data() { 
    return { 
      where: '집',
      house: '집'
    } 
  } 
} 
</script>

페이지 렌더링 결과

집이군

풀이하면 where 가 house 와 같으면 (?) '집이군' 표시, 아니면(:) '밖이군' 표시해~ 입니다

 

위의 조건은 단순해서 짧지만 일레먼트 안의 구문 내용이 너무 길면 가독성이 좋지 않기 마련입니다.
그래서 간단히 쓸 수 있는 조건문 Directive 를 제공합니다.

 

 

v-if

엘리먼트 내 if문을 사용할 수 있습니다.
그렇다면? else 와 else-if 도 당연히 사용 가능하다는 말씀

<template>
  <div>    
    <p v-if="showme">진실이라면 보여줘</p>
    <p v-else-if="showme == false">거짓이라면 보여줘</p>
    <p v-else>이도 저도 아니야</p>
  </div>
</template>

<script>
export default { 
  data() { 
    return { 
      showme: true
    } 
  } 
} 
</script>

페이지 렌더링 결과

진실이라면 보여줘

 

 

이제 남은 건 반복적인 데이터를 바인딩(표시)하기 위해 꼭 필요한 for 문입니다.

 

v-for

JS의 for문 역시 엘리먼트 내부에서 Vue의 뜻대로 사용 가능합니다.
아래 예제에선 v-text도 함께 사용한 흔적이 보입니다.

<template>
  <div>
    <ul>
      <li v-for="item in items" v-bind:key="item">{{ item }}</li>
    </ul>
    <p>&nbsp;</p>
    <ul>
      <li v-for="item2 of items2" v-bind:key="item2.id" v-text="item2.id + ': ' + item2.name"></li>
    </ul>
  </div>
</template>

<script>
export default { 
  data() { 
    return { 
      items: ['커피', '홍차', '쌍화차'],
      items2: [
        {
          id: '1',
          name: '캡틴마블'
        },
        {
          id: '2',
          name: '타노스'
        },
        {
          id: '3',
          name: '그루트'
        }
      ]
    } 
  } 
} 
</script>

페이지 렌더링 결과

• 커피
• 홍차
• 쌍화차

 

• 1: 캡틴마블
• 2: 타노스
• 3: 그루트

차례대로 착착! 순번 달기
index를 이용해 가져오는 순서대로 순번을 얻을 수도 있습니다.
<li v-for="(todo, index) in todos">{{ index + ', ' + todo }}</li>



금일은 여기까지 뷰썰을 풀고 사라지겠습니다.

아름다운 불금되세요~