title: Vue.js: rendering data based on class
body: <p><code>enter code here</code>How can i render a data of the list based on the specific class</p>
  
  <pre><code>&lt;div class="my-data"&gt;
  &lt;li class="list-group top"&gt;
  &lt;li class="list-group top"&gt;
  &lt;li class="list-group "&gt;
  &lt;li class="list-group "&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>now i want to show only the list item having class top </p>
  
  <p>i have my code as</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;vue js snippet&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.13/vue.js"&gt;&lt;/script&gt;
  &lt;!-- 
  &lt;link rel="stylesheet" type="text/css" href="bootstrap.css"&gt;
  &lt;script src="vue.js"&gt;&lt;/script&gt;
  
   --&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="app"&gt;
          &lt;div class="container"&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;ul class="list-group"&gt;
                      &lt;h1&gt;list of players&lt;/h1&gt;
                      &lt;li :class="['list-group-item']"   @click="removeplayer(player, $event)"  v-for="player in players" &gt;
                       {{player.id}}&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;ul class="list-group"&gt;
                      &lt;h1&gt;list of my players&lt;/h1&gt;
                      &lt;li v-show= "inas"&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;pre&gt;{{$data.players|json}}&lt;/pre&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
  
      var examples = new Vue ({
          el: "#app",
  
          data:{
              players:
  
              [{              
                  "id": 1,
                  "playername": "Allen",
                  "points": "8170",
                  "price": "88"
              },
              {
                  "id": 2,
                  "playername": "Fiona",
                  "points": "6952",
                  "price": "88"
              },
              {
                  "id": 3,
                  "playername": "Kathleen",
                  "points": "2895",
                  "price": "88"
              },
              {
                  "id": 4,
                  "playername": "Devin",
                  "points": "9725",
                  "price": "88"
              },
              {
                  "id": 5,
                  "playername": "Noah",
                  "points": "7453",
                  "price": "88"
              }]
  
          },
  
          methods: {
              removeplayer: function (player, ev) {
                  ev.target.classList.add('inas');
              }
                   }
              }); 
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>now what i want to do is on clicking this rendered list...i want it to be displayed within List of my players...this is like selecting your players from the list..</p>
  
  <p>on click event i have added the inas class..so i want that player to be displayed within my player list</p>