https:\/\/fullstack.io\/vue<\/a><\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"List rendering is one of the most commonly used practices in front-end web development. Dynamic list rendering is often used to present a series of similarly grouped information in a concise and friendly format to the user. In almost every web application we use, we can see lists of content in numerous areas of the […]<\/p>\n","protected":false},"author":251732,"featured_media":269453,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Render and shuffle a list of tweets using Vue's `v-for` directive.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1073,1074],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/vue-for-tweet-shuffle.gif?fit=800%2C400&ssl=1","jetpack-related-posts":[{"id":250336,"url":"https:\/\/css-tricks.com\/intro-to-vue-1-rendering-directives-events\/","url_meta":{"origin":269431,"position":0},"title":"Intro to Vue.js: Rendering, Directives, and Events","date":"January 30, 2017","format":false,"excerpt":"If I was going to sum up my experiences with Vue in a sentence, I\u2019d probably say something like \"it's just so reasonable\" or \"It gives me the tools I want when I want them, and never gets in my way\". Again and again when learning Vue, I smiled to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/01\/vue-1.jpg?fit=800%2C507&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":299707,"url":"https:\/\/css-tricks.com\/filtering-lists-dynamically-with-vue-on-the-server-side-is-easier-than-youd-think\/","url_meta":{"origin":269431,"position":1},"title":"Filtering Lists Dynamically With Vue on the Server Side is Easier Than You’d Think","date":"December 4, 2019","format":false,"excerpt":"I recently attended the ARTIFACT conference in Austin, TX, and was inspired by a few talks about accessibility through the lens of site performance. It became clear to me that there is this tendency to rely on big JavaScript frameworks to handle the work \u2014 like React, Vue, and Angular\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/marble-filter.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":261678,"url":"https:\/\/css-tricks.com\/creating-vue-js-transitions-animations\/","url_meta":{"origin":269431,"position":2},"title":"Creating Vue.js Transitions & Animations","date":"October 24, 2017","format":false,"excerpt":"My last two projects hurled me into the JAMstack. SPAs, headless content management, static generation... you name it. More importantly, they gave me the opportunity to learn Vue.js. More than \"Build a To-Do App\" Vue.js, I got to ship real-life, production-ready Vue apps. The agency behind Snipcart (Spektrum) wanted to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/10\/s_F5250556F7D3391E68057B73327023BE3FABE38B82BFDFDDC88FB44D203DAEA0_1507664011389_calvin-chin-1929.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325093,"url":"https:\/\/css-tricks.com\/quick-localstorage-usage-in-vue\/","url_meta":{"origin":269431,"position":3},"title":"Quick LocalStorage Usage in Vue","date":"November 5, 2020","format":false,"excerpt":"localStorage can be an incredibly useful tool in creating experiences for applications, extensions, documentation, and a variety of use cases. I've personally used it in each! In cases where you're storing something small for the user that doesn't need to be kept permanently, localStorage is our friend. Let's pair localStorage\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/vue-localstorage.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333537,"url":"https:\/\/css-tricks.com\/dynamically-switching-from-one-html-element-to-another-in-vue\/","url_meta":{"origin":269431,"position":4},"title":"Dynamically Switching From One HTML Element to Another in Vue","date":"February 2, 2021","format":false,"excerpt":"A friend once contacted me asking if I had a way to dynamically change one HTML element into another within Vue\u2019s template block. For instance, shifting a
element to a element based on some criteria. The trick was to do this without relying on a series of v-if\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/button-link-swap.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":256806,"url":"https:\/\/css-tricks.com\/simple-server-side-rendering-routing-page-transitions-nuxt-js\/","url_meta":{"origin":269431,"position":5},"title":"Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js","date":"July 24, 2017","format":false,"excerpt":"A bit of a wordy title, huh? What is server side rendering? What does it have to do with routing and page transitions? What the heck is Nuxt.js? Funnily enough, even though it sounds complex, working with Nuxt.js and exploring the benefits of isn't too difficult. Let's get started! Server\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2017\/07\/nuxt.png?fit=1116%2C448&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/vue-for-tweet-shuffle.gif?fit=800%2C400&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/269431"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/251732"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=269431"}],"version-history":[{"count":41,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/269431\/revisions"}],"predecessor-version":[{"id":269579,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/269431\/revisions\/269579"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/269453"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=269431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=269431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=269431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}