Vue Macros

English

简体中文

English

简体中文

Appearance

On this page

jsxDirective ​

Stability: experimental ⚠️ Experimental feature, use at your risk

v-if and v-for directive for jsx.

FeaturesSupported
Vue 3✅
Nuxt 3✅
Vue 2✅
Volar(v-for)❌

Usage ​

vue
<script setup lang="tsx">
const { foo, list } = defineProps<{
  foo: number
  list: number[]
}>()

defineRender(() => (
  <>
    <div v-if={foo === 0}>
      <div v-if={foo === 0}>0-0</div>
      <div v-else-if={foo === 1}>0-1</div>
      <div v-else>0-2</div>
    </div>

    <div v-for={(i, index) in list} key={index}>
      {i}
    </div>
  </>
))
</script>