Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <title>Shopping List 3</title> <style> #app { border: dashed black 1px; display: inline-block; padding: 0 20px; } #app label, #app li { padding: 5px; border-radius: 5px; } #app label:hover, #app li:hover { cursor: pointer; background-color: lightgray; } ul { list-style-type: none; } li { margin: 2px; background-color: rgb(211, 254, 211); } .impClass { background-color: rgb(255, 202, 202); } #ulFound li { text-decoration: line-through; background-color: rgb(230,230,230); } </style> </head> <body> <h1>Example: Mark Found Items</h1> <p>In this version of our shopping list the user can mark found items by clicking them. Found items become visible in the found items list, and items not found yet appear in the top without strike through. All shopping list items are created in both lists with v-for, they are just made visible in one list or the other with v-show depending on the 'found' data property.</p> <p>If you find an item, but you click the wrong item in the list, you can just click it again to correct the mistake.</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 id="ulToFind"> <li v-for="item in shoppingList" v-bind:class="{ impClass: item.important }" v-on:click="item.found=!item.found" v-show="!item.found"> {{ item.name }}, {{ item.number}} </li> </ul> <ul id="ulFound"> <li v-for="item in shoppingList" v-bind:class="{ impClass: item.important }" v-on:click="item.found=!item.found" v-show="item.found"> {{ 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, found: false }, { name: 'Bread', number: 1, important: false, found: false }, { name: 'Soap', number: 1, important: true, found: true } ] } }, methods: { addItem(){ let item = { name: this.itemName, number: this.itemNumber, important: this.itemImportant, found: false } this.shoppingList.push(item) this.itemName = null this.itemNumber = null this.itemImportant = false } } }) app.mount('#app') </script> </body> </html>
