Created
April 11, 2017 02:44
-
-
Save harishkotra/4989be58adea6510c9b949635858df2c to your computer and use it in GitHub Desktop.
Vue.js - v-show directive example to hide an element if no input is received in a text field.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <!-- just any other regular html tag --> | |
| <title>Vue Demo App with v-show directive</title> | |
| <!-- Fetch vue.js from the following library --> | |
| <!-- Other alternatives are to download the original library from https://vuejs.org/ --> | |
| <script src="https://unpkg.com/vue"></script> | |
| <style> | |
| #app { | |
| font-family: 'Montserrat', Helvetica, Arial, sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-align: center; | |
| color: #2c3e50; | |
| margin: 20px; | |
| font-size:26px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- | |
| Element to play around using vue. | |
| "app" is used in the javascript written below to add text and perform relevant actions. | |
| --> | |
| <div id="app"> | |
| <h4>Simple form button example with v-show</h4> | |
| <form action=""> | |
| <textarea name="message" v-model="message" id="" cols="30" rows="10"></textarea><br> | |
| <button v-show="message">Go</button> | |
| </form> | |
| </div> | |
| <script> | |
| //app is assigned to the Vue instance. | |
| //Vue accepts el and data to target the div. | |
| var app = new Vue({ | |
| el: "#app", | |
| data: { | |
| message: '' | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2222