shortBind
稳定性:
稳定
绑定相同数据名称的 prop
的语法糖。
:value
-> :value="value"
Features | Supported |
---|---|
Vue 3 | ✅ |
Nuxt 3 | ✅ |
Vue 2 | ❌ |
Volar Plugin | ✅ |
用法
基本用法
vue
<script setup>
const value = 'foo'
</script>
<template>
<input :value />
<!-- => <input :value="value" /> -->
</template>
和 shortVmodel
一起使用
vue
<template>
<Comp ::msg />
<!-- => <Comp ::foo="foo" /> => <Comp v-model:foo="foo" /> -->
<Comp $msg />
<!-- => <Comp $foo="foo" /> => <Comp v-model:foo="foo" /> -->
<Comp *msg />
<!-- => <Comp *foo="foo" /> => <Comp v-model:foo="foo" /> -->
</template>
Volar 配置
jsonc
// tsconfig.json
{
"vueCompilerOptions": {
"plugins": ["unplugin-vue-macros/volar"],
},
}