# useFormat
Format text based on arguments
# Parameters
import { useFormat } from "vue-composable";
useFormat(format, obj);
useFormat(format, arg1, arg2);
Parameters | Type | Required | Description |
---|---|---|---|
format | Ref<string>|String | true | String format |
obj | Record<string, Ref<string|object>> | true | Object based dictionary |
args/arg1,arg2 | Array<Ref<string|object>> | true | Array based keys |
# State
The useFormat
function exposes the following reactive state:
import { useFormat } from "vue-composable";
const result = useFormat();
State | Type | Description |
---|---|---|
result | String | Reactive format |
# Example
Format example
Format:
hello world
# Code
<template>
<div id="format">
<div>
<h4>Array based example</h4>
<div>
Format:
<input v-model="inputFormat" />
</div>
<ul>
<li v-for="(a, i) in args" :key="i">
<input v-model="a.value" @input="onChange($event, i)" />
<button title="remove" @click="remove(i)">x</button>
</li>
<li>
<button @click="add">add +</button>
</li>
</ul>
</div>
<p>
<b>{{ format }}</b>
</p>
</div>
</template>
<script>
import { ref } from "@vue/composition-api";
import { useFormat } from "vue-composable";
export default {
name: "format-example",
setup() {
const inputFormat = ref("{0} {1}");
const args = ref([ref("hello"), ref("world")]);
const format = useFormat(inputFormat, args);
const add = () => args.value.push(ref(`{${args.value.length}}`));
const remove = index => args.value.splice(index, 1);
const onChange = (ev, index) => {
args.value[index].value = ev.target.value;
};
return {
inputFormat,
format,
args,
onChange,
add,
remove
};
}
};
</script>
← performanceNow path →