Vue.js – v attr
v-x attributes
v- is Vue attribute bind and management description.
There are a lot of v- prefix
For details, please read Vue.js document : Reactive Directives
v- list
v- | description |
---|---|
v-bind:x | x is attributes name, any text is O.K. basically |
v-if | if : Use condition management |
v-for | For loop, Use like this: v-for=”item in items” |
v-on:x | Bind events(for example v-on:click |
v-model | Bind data into this element(Use for input tag etc…) |
v-once | Can change only one time(Become read-only) |
v-html | Bind row html code into text attr |
v-show | Whether this element should be show or not |
Examples
v-bind:
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app-2"> <span v-bind:title="message"> Message is title attr in span tag. </span> </div> <script> new Vue({ el: '#app-2', data: { message: 'This is hidden message' } }) </script> </body> </html>
v-bind:href
Bind href in a tag.
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app-2"> <p> <a v-bind:href="url">Link</a> <a :href="url">ShortHand</a> </p> </div> <script> new Vue({ el: '#app-2', data: { url: 'https://www.google.com.sg' } }) </script> </body> </html>
v-if
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app-3"> <span v-if="seen">Now you see me!</span> </div> <script> new Vue({ el: '#app-3', data: { seen: true } }) </script> </body> </html>
If change “seen” data from true to false, you cannot see span tag.
v-for
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <script> new Vue({ el: '#app-4', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] } }) </script> </body> </html>
v-on:click
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app-5"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> </div> <script> new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function() { this.message = this.message.split('').reverse().join('') } } }) </script> </body> </html>
methods is method data into this vue object.
You can add function inside of this data.
We can use @click as same meanings.
v-model
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> <script> var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue' } }) </script> </body> </html>
data.message is inside of input.
Every time data in input chages, message also changes.
v-html
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app-7> <p>Non Raw<span>{{ rawHtml }}</span></p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> </div> <script> var vm = new Vue({ el: '#app', data: { rawHtml: '<strong>V2</strong>' } }); <script> </body> </html>