This content originally appeared on DEV Community and was authored by Laur.Rvt
Hi!
In this post I am going to show you a simple way to do a Read More/Read Less functionality in vue.js.
One way to do that is to have two divs that will store both versions of the text (the long and the short one) but that is working only if we work with static texts.
This is a working version of this functionality using a variable in which will be stored our text:
https://codesandbox.io/s/eager-kowalevski-u406b?file=/src/App.vue
The idea is pretty simple. I just have a bool variable named "readMore" which will control displaying of Read More and Read Less buttons. Also, using readMore ,I give to div that stores the text a new class named "readLess" which have it own styles.
Hope it was useful for you. If you have any questions or suggestions, feel free to text me about that :)
This content originally appeared on DEV Community and was authored by Laur.Rvt
Laur.Rvt | Sciencx (2021-05-26T19:00:35+00:00) Read More/Read Less functionality with Vue. Retrieved from https://www.scien.cx/2021/05/26/read-more-read-less-functionality-with-vue/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.