JSFiddle - React, Tailwind, and code Playground
by skirtle
HTML
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
<ul>
<li
v-for="value in list"
:key="value"
:class="{ selected: selected === value }"
@click="onClick(value)"
>{{ value }}</li>
</ul>
</div>
CSS
.selected {
background: yellow;
}
JavaScript
Vue.createApp({
data () {
return {
selected: null,
list: ['Red', 'Green', 'Blue']
}
},
methods: {
onClick (value) {
this.selected = value
}
}
}).mount('#app')