Vue.js

뷰 태그 그룹핑

sdafdq 2023. 10. 5. 17:53

보통 css 그룹핑은 div로 하긴 하는데,

 

vue의 같이 처리하고 싶은거 

<template>
  <button @click="change()">click me!!!</button>
  <button @click="countHandler(+1)">+1</button>
  <template>
    <h1 :class="{active : isActive}" v-if="isShow">{{ msg }}</h1>
  <tem v-else-if="count > 5">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur delectus hic iusto, quibusdam dicta, sit doloremque accusantium eos repudiandae facere dolores tempora aliquid. Quod modi, autem pariatur ducimus tempore commodi?</p>
  </tem>
  <h2 v-else>
    Good
  </h2>
  </template>
</template>

 

이런 식으로 뭔가 같이 처리하고 싶은거 template로 묶음.

 

이건 html꺼가 아니여서, html은 못 읽음.

 

v-if 이런 거 쓸 수 있음. 뷰 기술은 쓸 수 있음.

 

참고로, 전체를 감싸는 저 가장 바깥의 탬플릿은 조건문을 쓸 수 없음.

 

 

 

'Vue.js' 카테고리의 다른 글

이벤트 핸들러  (0) 2023.10.10
v-show  (0) 2023.10.05
뷰 조건문  (0) 2023.10.05
변수로 스타일 바꾸기  (0) 2023.10.05
클래스 바인딩, 템플릿 내의 조건문.  (0) 2023.10.04