Skip to content

useChangeCase

change-case 的反应式封装。

¥Reactive wrapper for change-case.

替代 useCamelCaseusePascalCaseuseSnakeCaseuseSentenceCaseuseCapitalize 等。

¥Subsitutes useCamelCase, usePascalCase, useSnakeCase, useSentenceCase, useCapitalize, etc.

示例

helloWorld
Available in the @vueuse/integrations add-on.

安装

¥Install

bash
npm i change-case@^5

用法

¥Usage

ts
import { 
useChangeCase
} from '@vueuse/integrations/useChangeCase'
// `changeCase` will be a computed const
changeCase
=
useChangeCase
('hello world', 'camelCase')
changeCase
.
value
// helloWorld
changeCase
.
value
= 'vue use'
changeCase
.
value
// vueUse
// Supported methods // export { // camelCase, // capitalCase, // constantCase, // dotCase, // headerCase, // noCase, // paramCase, // pascalCase, // pathCase, // sentenceCase, // snakeCase, // } from 'change-case'

或者传递一个 ref 给它,返回的 computed 将随着源引用的变化而变化。

¥or passing a ref to it, the returned computed will change along with the source ref's changes.

可以传入 options 进行定制

¥Can be passed into options for customization

ts
import { 
useChangeCase
} from '@vueuse/integrations/useChangeCase'
import {
shallowRef
} from 'vue'
const
input
=
shallowRef
('helloWorld')
const
changeCase
=
useChangeCase
(
input
, 'camelCase', {
delimiter
: '-',
})
changeCase
.
value
// hello-World
input
.
value
= 'vue use'
changeCase
.
value
// vue-Use