const app = new Vue({
el: '#app',
data() {
return {
items: [
{text: 'qweewqeqweqw qweeqweq kqwe,qlwe, eqwe'},
{text: 'qweewqeqweqw qweeqweq kqwe,qlwe, eqwe'},
{text: 'qweewqeqweqw qweeqweq kqwe,qlwe, eqwe'},
{text: 'qweewqeqweqw qweeqweq kqwe,qlwe, eqwe'},
{text: 'qweewqeqw'},
{text: 'qweewqeqweqw qweeqweq kqwe,qlwe, eqwe'},
{text: 'qweewqeqw'},
{text: 'qweewqeqweqw qweeqweq kqwe,qlwe, eqwe'},
{text: 'qweewqeqw'},
],
}
},
methods: {
Massageforpeople() {
if (this.items.text.length >= 16) {
}
}
},
});<div class="" id="app">
<div class="block" v-for="item in items">
{{Massageforpeople()}} - {{item.text.length}}
</div>
</div>
data: () => ({
maxlen: 10,
items: [
'hello, world!!',
'fuck the world',
'fuck everything',
'1234567890',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit,',
],
}),
methods: {
short1: (str, maxlen) => str.length <= maxlen ? str : str.slice(0, maxlen) + '...',
short2: (str, maxlen) => str.substring(0, maxlen) + (str.charAt(maxlen) && '...'),
short3: (str, maxlen) => str.replace(RegExp(`(.{${maxlen}}).+`), '$1...'),
short4: (str, maxlen) => str.replace(RegExp(`(?<=.{${maxlen}}).+`), '...'),
},<input type="range" min="1" max="20" v-model="maxlen">
<span>{{ maxlen }}</span>
<div v-for="n in items">
<div v-text="short1(n, maxlen)"></div>
<div v-html="short2(n, maxlen)"></div>
<div :text-content.prop="short3(n, maxlen)"></div>
<div>{{ short4(n, maxlen) }}</div>
</div>
<body>
<p class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequuntur laudantium commodi corporis, sunt repellendus impedit quo veritatis reiciendis. Deleniti sequi cumque id animi cupiditate, cum maiores eaque minus maxime itaque.</p>
</body>
<script>
let text = document.querySelector('.text')
text.innerHTML = text.innerHTML.slice(0, 16) + "..."
</script>
Простой
Простой
Средний
