screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> </head> <body> <div id="app"> <h3>Vue Js Check string is Empty or not</h3> <input v-model="inputValue" type="text" placeholder="Enter a value" /> <button @click="checkString">Check String</button> <p>{{ result }}</p> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { inputValue: "", result: "", }; }, methods: { checkString() { const str = this.inputValue; if (str && str.trim() !== "") { this.result = "Input Field is Not Empty"; } else { this.result = "Input Field is Empty"; } }, }, }); </script> <style> #app { text-align: center; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); width: 600px; margin: 0 auto; padding: 20px; } h3 { color: #333; margin-bottom: 20px; } input[type="text"] { width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; outline: none; box-sizing: border-box; margin-bottom: 1rem; } button { padding: 10px 20px; font-size: 16px; background-color: #4caf50; color: #fff; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } p { margin-top: 20px; font-size: 18px; } </style> </body> </html>