toggle vue code example
Example 1: vue v-show toggle
<div v-show="isVisible">
<h1>Título</h1>
<p>Parágrafo 1</p>
<p>Parágrafo 2</p>
</div>
//div will be rendered and toggle display: none; as isVisible is set true or false.
<script>
export default {
data () {
return {
isVisible: false
}
}
}
</script>
Example 2: vuejs toggle on each in v-for
<template>
<ul>
<li v-for="item in items" :class="{ activeclass: item.isActive }">
<div class="item-text">
{{ item.text }}
</div>
<button @click="toggle(item)">show</button>
<div v-show="item.isActive" class="item-desc">
{{ item.desc }}
</div>
</li>
</ul>
</template>
<script>
export default {
data () {
return {
items: [
{
isActive: false,
text: 'Foo',
desc: 'The Array.from() method creates a new Array instance from an array-like or iterable object.',
},
{
isActive: false,
text: 'Bar',
desc: 'The Array.from() method creates a new Array instance from an array-like or iterable object.',
}
],
}
},
methods: {
toggle(item, items) {
items.forEach((el) => {
if (el === item) {
el.isActive = !el.isActive;
} else {
el.isActive = false;
}
})
}
},
}
</script>