Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!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"> </p> <p> Important? <label> <input type="checkbox" v-model="itemImportant"> {{ itemImportant }} </label> </p> <button type="submit">Add item</button> </form> <br> <hr> <div> <p><strong>Shopping list:</strong></p> <ul> <li v-for="item in shoppingList" v-bind:class="{ impClass: item.important }">{{ item.name }}, {{ item.number}}</li> </ul> </div> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> const app = Vue.createApp({ data() { return { itemName: null, itemNumber: null, itemImportant: false, shoppingList: [ { name: 'Tomatoes', number: 5, important: false } ] } }, methods: { addItem(){ let item = { name: this.itemName, number: this.itemNumber, important: this.itemImportant } this.shoppingList.push(item) this.itemName = null this.itemNumber = null this.itemImportant = false } } }) app.mount('#app') </script> </body> </html>
