shortBind

稳定性: 稳定

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

:value -> :value="value"

Features	Supported
Vue 3	✅
Nuxt 3	✅
Vue 2	❌
Volar Plugin	✅

用法

基本用法

<script setup>
const value = 'foo'
</script>

<template>
  <input :value />
  <!-- => <input :value="value" /> -->
</template>

和 shortVmodel 一起使用

<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 配置

// tsconfig.json
{
  "vueCompilerOptions": {
    "plugins": [
      "@vue-macros/volar/short-bind",
      // ...
    ],
  },
}

ESLint 配置

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

贡献者

Kevin Deng

页面历史

最后编辑于 大约 4 小时前

查看完整历史

9ee43b3-feat(docs): add package version

411e0fa-docs: fix name casing