37 lines
1.5 KiB
Vue
37 lines
1.5 KiB
Vue
<template>
|
|
|
|
|
|
<div id="app" class="container">
|
|
<p>A simple Read More, Read Less pen in Vue.js</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis lectus magna
|
|
fringilla urna. Etiam tempor orci eu lobortis. Integer quis auctor elit sed vulputate mi sit. Lacinia
|
|
at quis risus sed vulputate odio ut enim blandit. Nibh praesent tristique magna sit amet purus. Eleifend donec pretium vulputate sapien nec
|
|
sagittis. Facilisi morbi tempus iaculis urna id volutpat. Ultrices neque ornare aenean euismod.<span v-if="readMore"></span>
|
|
<span v-else>...</span>
|
|
</p>
|
|
|
|
<p v-show="readMore">Ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Turpis egestas pretium aenean pharetra magna ac
|
|
placerat. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Sed cras ornare arcu dui. Aliquam vestibulum
|
|
morbi blandit cursus. Adipiscing elit ut aliquam purus sit amet. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Ut etiam sit amet
|
|
nisl purus in mollis. Eu mi bibendum neque egestas congue quisque egestas diam in. Pellentesque adipiscing
|
|
commodo elit at imperdiet dui accumsan sit.
|
|
</p>
|
|
<button class="btn btn-success" @click="readMore =! readMore">
|
|
<span v-if="readMore">Read Less</span>
|
|
<span v-else>Read More</span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
|
|
|
|
// new Vue({
|
|
// el: '#app',
|
|
// data:{
|
|
// readMore: false
|
|
// }
|
|
// });
|
|
|
|
|
|
</script> |