Skip to content

shortBind

稳定性: 稳定

绑定相同数据名称的 prop 的语法糖。

:value -> :value="value"

FeaturesSupported
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": [
      "@vue-macros/volar/short-bind",
      // ...
    ],
  },
}

ESLint 配置

jsonc
// .eslintrc
{
  "rules": {
    "vue/valid-v-bind": "off",
  },
}

贡献者

The avatar of contributor named as renovate[bot] renovate[bot]

页面历史