运行 ❯
获取您
自己
的网站
×
更改方向
保存代码
更改主题，深色/浅色
前往 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>
