VueUseuseChangeCase
Reactive wrapper for change-case.
Demo
"helloWorld"Install
bash
npm i change-case
npm i change-case
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'
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'
or passing a ref to it, the returned computed will change along with the source ref's changes.
Can be passed into options for customization
ts
import { ref } from 'vue-demi'
import { useChangeCase } from '@vueuse/integrations/useChangeCase'
const input = ref('helloWorld')
const changeCase = useChangeCase(input, 'camelCase', {
delimiter: '-',
})
changeCase.value // hello-World
ref.value = 'vue use'
changeCase.value // vue-Use
import { ref } from 'vue-demi'
import { useChangeCase } from '@vueuse/integrations/useChangeCase'
const input = ref('helloWorld')
const changeCase = useChangeCase(input, 'camelCase', {
delimiter: '-',
})
changeCase.value // hello-World
ref.value = 'vue use'
changeCase.value // vue-Use
Type Declarations
typescript
export type ChangeCaseType = keyof typeof changeCase
export declare function useChangeCase(
input: MaybeRef<string>,
type: ChangeCaseType,
options?: Options | undefined
): WritableComputedRef<string>
export declare function useChangeCase(
input: MaybeComputedRef<string>,
type: ChangeCaseType,
options?: Options | undefined
): ComputedRef<string>
export type ChangeCaseType = keyof typeof changeCase
export declare function useChangeCase(
input: MaybeRef<string>,
type: ChangeCaseType,
options?: Options | undefined
): WritableComputedRef<string>
export declare function useChangeCase(
input: MaybeComputedRef<string>,
type: ChangeCaseType,
options?: Options | undefined
): ComputedRef<string>
Source
Contributors
Anthony Fu
sun0day
Curt Grimes
马灿