screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3.2.22/dist/vue.global.js"></script> </head> <body> <div id="app"> <h3>Vue Js Check if value is not equal to another value in the array</h3> <ul> <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li> </ul> </div> <script type="module"> const app = Vue.createApp({ data() { return { items: [ { id: 1, name: 'Apple', category: 'fruit' }, { id: 2, name: 'Banana', category: 'fruit' }, { id: 3, name: 'Cake', category: 'dessert' }, { id: 4, name: 'Pasta', category: 'main course' }, { id: 5, name: 'Salad', category: 'appetizer' } ] }; }, computed: { filteredItems() { const excludedCategories = ['fruit', 'dessert']; return this.items.filter(item => !excludedCategories.includes(item.category)); } } }) app.mount('#app') </script> <style scoped> /* Reset default styles */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Set up some basic styles for the container */ #app { max-width: 800px; margin: 0 auto; padding: 2rem; } /* Style the heading */ h3 { font-size: 1.8rem; font-weight: bold; margin-bottom: 1.5rem; color: #333; } /* Style the message when there are no matching items */ p { font-size: 1.2rem; color: #999; } /* Style the list of items */ ul { list-style: none; margin-top: 1.5rem; } li { font-size: 1.4rem; line-height: 1.5; margin-bottom: 0.5rem; border-bottom: 1px solid #ddd; padding-bottom: 0.5rem; } li:last-child { border-bottom: none; margin-bottom: 0; } /* Style the list of items when there are no matching items */ ul.empty { display: flex; justify-content: center; align-items: center; height: 150px; } ul.empty li { display: none; } </style> </body> </html>