Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/lodash/4/lodash.min.js"></script>
  <title>JS Bin</title>
</head>
<body>
<div id="app">
  <label>
    Nom : <input type="text" v-model="nom"> 
  </label>
  <label>
    Cuisine : <input type="text" v-model="cuisine"> 
  </label>
  <button v-on:click="ajouterRestaurant">Ajouter</button>
  <h1>Nombre de restaurants : {{restaurants.length}}</h1>
  <table>
  <thead>
    <tr>
    <td>nom</td>
    <td>cuisine</td>
    </tr>
  </thead>
  <tbody>
    <tr
      v-for="r,index in restaurants"
      v-on:click="supprimerRestaurant(index)"
      v-bind:style="{backgroundColor:getColor(index)}" 
      v-bind:class="{bordureRouge: (index === 4)}"
        >
      <td>{{r.nom}}</td>
      <td>{{r.cuisine}}</td>
    </tr>
  </tbody>
  </table>
</div>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
micbuffapro
0viewers