Behaviour
- Text on left column is right-aligned, truncated if too long
- Support display of string or array value type
<template> <div> <dl class="row"> <template v-for="_info in infos"> <dt class="col-3 col-md-2 text-right text-truncate">{{ _info.name }}</dt> <dd class="col-9 col-md-10"> <template v-if="_info.type == 'list'"> <ul class="list-inline"> <li v-for="_item in _info.value"> {{ _item }} </li> </ul> </template> <template v-else>{{ _info.value }}</template> </dd> </template> </dl> </div></template><script>export default { data() { return { infos: [ { name: 'Name', value: 'Desmond' }, { name: 'Age', value: 40 }, { name: 'Hobbies', type: 'list', value: ['Hiking', 'Coding'] } ] } }}</script>References: