<script>
export default {
data() {
return {
items: [
{val: 1111, boxed: true, isSpan: false},
{val: 2222, boxed: true, isSpan: false},
{val: 3333, boxed: true, isSpan: false},
{val: 4444, boxed: true, isSpan: true},
{val: 5555, boxed: true, isSpan: true},
{val: 7777, boxed: false, isSpan: true},
{val: 9999, boxed: false, isSpan: true},
{val: 555, boxed: true, isSpan: true},
],
red: false
}
}
}
</script>
<template>
<h1>Totoro {{red}} </h1>
<button @click="red = !red">Кнопка</button>
<div class="cont">
<template v-for="item in items" v-key='item.val'>
<template v-if='item.boxed && red'>
<div class='yy'>
<span class='block' v-if='item.isSpan'>{{item.val}}
</span>
<div class='block' v-else>
{{item.val}}
</div>
</div>
</template>
<template v-else>
<span class='block' v-if='item.isSpan'> {{item.val}}</span>
<div class='block' v-else >
{{item.val}}
</div>
</template>
</template>
</div>
</template>
<style>
.yy > .block{
border: 2px solid red;
}
.cont{
width: 380px;
margin: 0 auto;
}
.block{
border: 2px solid rgb(10, 185, 54);
padding: 2px;
margin: 5px;
max-width: 100px;
}
button{
background: rgb(134, 255, 63);
border: 3px solid #000;
margin: 4px;
}
</style>
