JSFiddle - React, Tailwind, and code Playground

by majikarikeruo

HTML

<div id="app">
  <h1>どの芋がすきですか？</h1>
  <ul class="list">
    <li v-for="item in list" class="list-item" v-bind:class="{selected:activeItem===item} " @mouseover="activeItem=item" @mouseout="activeItem=''" @click="selectItem(item)">{{item}}</li>
  </ul>
  <div v-if="this.selectedItem">
    あなたが選んだ芋は{{selectedItem}}です。
  </div>
</div>

CSS

.list{
  width: 300px;
  padding: 0;
  border:solid 1px #ccc;
}
.list-item{
  padding: 8px;
  border-bottom:solid 1px #ccc;
}
.list-item:last-of-type{
  border-bottom:none;
}
.selected{
  background-color: #00f;
  color:#fff;
}

JavaScript

new Vue({
  el:"#app",
  data:{
    list:["じゃがいも","さつまいも","さといも"],
    activeItem:"",
    selectedItem:""
  },
  methods:{
    selectItem(item){
      this.selectedItem = item;
    }
  }
})