Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
  <title>Shopping List 2</title>
  <style>
    #app {
      border: dashed black 1px;
      display: inline-block;
      padding: 0 20px;
    }
    #app label {
      padding: 5px;
    }
    #app label:hover {
      cursor: pointer;
      background-color: lightgray;
      border-radius: 5px;
    }
    ul {
      list-style-type: none;
    }
    li {
      border-radius: 5px;
      padding: 5px;
      margin: 2px;
      background-color: rgb(211, 254, 211);
    }
    .impClass {
      background-color: rgb(255, 202, 202);
      font-weight: bold;
    }
  </style>
</head>
<body>
<h1>Example: Shopping List With Important Items</h1>
<p>In this version of our shopping list the user can define if an item is important. The checkbox is more dynamic because the 'true' or 'false' text changes to show the status when the user checks it.</p>
<div id="app">
  <form v-on:submit.prevent="addItem">
    <p>
      What do you need? <br>
      <input type="text" required placeholder="item name.." v-model="itemName">
    </p>
    <p>
      How many? <br>
      <input type="number" placeholder="number of items.." v-model="itemNumber">