JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <button @click="toggle">
    Toggle yellow
  </button>
  <ul>
    <li v-for="item in items" :style="{ backgroundColor: item }">{{ item }}</li>
  </ul>
  <ul>
    <li v-for="item in items" :key="item" :style="{ backgroundColor: item }">{{ item }}</li>
  </ul>
</div>

CSS

li {
  transition: background-color 5s;
}

JavaScript

Vue.createApp({
  data () {
    return {
      items: ['Red', 'Green', 'Blue']
    }
  },
  
  methods: {
    toggle () {
      if (this.items[0] === 'Yellow') {
        this.items.shift()
      } else {
        this.items.unshift('Yellow')
      }
    }
  }
}).mount('#app')