shortVmodel

稳定性: 稳定

v-model 的语法糖。

v-model -> :: / $ / *

如果你对此功能有任何疑问，欢迎在 RFC 中发表评论。

特性	支持
Vue 3	✅
Nuxt 3	✅
Vue 2	❌
Volar Plugin	✅

选项

interface Options {
  /**
   * @default '$'
   */
  prefix?: '::' | '$' | '*'
}

用法

`$` 美元符号 (默认)

vue

<template>
  <input $="msg" />
  <!-- => <input v-model="msg" /> -->
  <demo $msg="msg" />
  <!-- => <input v-model:msg="msg" /> -->
</template>

`::` 双引号

vue

<template>
  <!-- prettier-ignore -->
  <input ::="msg" />
  <!-- => <input v-model="msg" /> -->
  <demo ::msg="msg" />
  <!-- => <input v-model:msg="msg" /> -->
</template>

`*` 星号

vue

<template>
  <input *="msg" />
  <!-- => <input v-model="msg" /> -->
  <demo *msg="msg" />
  <!-- => <input v-model:msg="msg" /> -->
</template>

Volar 配置

tsconfig.json

jsonc

{
  "vueCompilerOptions": {
    "plugins": ["unplugin-vue-macros/volar"],
    "vueMacros": {
      "shortVmodel": {
        "prefix": "$",
      },
    },
  },
}