screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>Vue Js Input only Positive Number </h3> <input type="number" v-model.number="positiveNumber" @input="filterNonPositive"> <div v-if="showError" class="error-message">Please enter a positive number.</div> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { positiveNumber: '', showError: false } }, methods: { filterNonPositive() { if (this.positiveNumber < 0 || isNaN(this.positiveNumber)) { this.positiveNumber = ''; this.showError = true; } else { this.showError = false; } } } }); </script> <style scoped> #app { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 50px; } h3 { font-size: 24px; font-weight: bold; margin-bottom: 20px; } input { padding: 10px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; margin-bottom: 20px; } .error-message { color: red; font-size: 14px; margin-top: 10px; } </style> </body> </html>