指令

用于 JSX 的 Vue 内置指令。

指令	Vue	Volar
v-if, v-else-if, v-else	✅	✅
v-slot, v-slots	✅	✅
v-for	✅	✅
v-model	✅	✅
v-html, v-text	✅	/
v-once	✅	/

v-if, v-else-if, v-else

export default ({  = 0 }) => {
  return (
    <>
      < v-if={ === 0}>{}</>

      < v-else-if={ === 1}>{}</>

      < v-else>{}</>
    </>
  )
}

v-for

export default () => (
  < v-for={(, ) in 4} ={}>
    {}
  </>
)

v-slot, v-slots

WARNING

由于无法为带有默认值的指令表达式（例如 v-slot={({ foo = '' })}）生成正确的 AST，因此不支持默认值。

v-slot

const  = () => {
  <{
    : () => any
    : (: { : number }) => any
    : (: { : boolean }) => any
  }>()
   < />
}

export default () => (
  <>
    默认插槽
    <template v-slot:s={{  }}>
      {}
    </template>
  </>
)

v-slots

const  = () => {
  <{
    : () => any
    : (: { : number }) => any
    : (: { : boolean }) => any
  }>()
   < />
}

export default () => (
  <
    ={{
      : () => <>默认插槽</>,
      : ({  }) => <>{}</>,
    }}
  />
)

修饰符

修饰符是以 _ 表示的特殊后缀，表示指令应以某种特殊方式绑定。 因为 JSX 不支持 . 关键字，所以用 _ 代替。

<form onSubmit_prevent>
  <input v-model_number={value} />
</form>

动态参数

动态参数可以通过变量的形式传递给数组值的第二个参数，第三个参数为指令的修饰符。

v-model

import {  } from 'vue'

const  = () => {
  const  = <string, 'm1' | 'm2'>('model')
  const  = <string[]>('models')
   < />
}

export default () => {
  const  = ('')
  const  = ('model')
  return (
    <
      v-model={[., ., ['m1', 'm2']]}
      v-model:m={.}
    />
  )
}

v-slot

const  = () => {
  const  = <{
    : () => any
  }>()
   < />
}

export default (, {  }: { : { : () => any } }) => (
  <>
    <template v-for={(, ) in } v-slot={[, ]}>
      < {...} />
    </template>
  </>
)