Vue. Js’s instruction

Vue.js directives start with a V – and they apply to HTML elements. Directives provide special features. When you bind directives to an element, they add special behavior to the bound target element.

Commonly used instructions

  • v-model
  • v-if
  • v-else
  • v-show
  • v-for
  • v-bind
  • v-on

V – model instruction

Vue.js can use v-model directives to achieve bidirectional binding between the model and form elements, which means that the data in the model can be displayed in the form elements, and the form elements will be modified if the model data is modified, and the model data will be changed when input is made in the form elements.

<! DOCTYPE HTML > < HTML > < head > < title > using the Vue < / title > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > </head> <body> <! -- This is the View section, The binding Model of data - > < div id = "app" > < p > {{name}} < / p > < p > {{sex}} < / p > < p > {{age}} < / p > < input type = "text" placeholder = "input name" v-model="name"><br> <input type="text" placeholder="Input Sex" v-model="sex"><br> <input type="text" placeholder="Input Age" v-model=" Age" ><br> </div> <script type="text/javascript"> Var vue = new vue ({el:'#app', data:person}); </script> </body> </html>Copy the code

As you type in the text box, the content above will update



Modify the model data in the console, and the text box is updated

V-if and V-else directives

Conditions can be added after the V-if instruction. If the condition is true, the tag will be inserted into the HTML. If the condition is not true, the tag will not appear in the HTML. The V-else tag works with the V-if tag to insert other content into the HTML when the if condition is not established.

< div id = "app" > < p > {{name}} < / p > < p > {{sex}} < / p > < p > {{age}} < / p > < h2 v - if = "age > = 18" > {{name}} as an adult < / h2 > < h2 V -else>{{name}} is a minor </h2> </div> <script type="text/javascript"> var person = {name:' z3 ',sex:' male ',age:20}; var vue = new Vue({el:'#app', data:person }); </script>Copy the code

On the console, type age as 20 to show that John is an adult. Type age as 15 to show that John is a minor.

V – show commands

To judge the conditions, when the establishment of the label, not hidden label. The effect of the V-show command is similar to that of the V-else command. The difference is that the V-show command hides and displays tags through the display style, while the V-if command inserts and deletes tags in the HTML code.

<h3 v-show="sex==' male '">{{name}} is male </h3>Copy the code

V – for instructions

The V-for command is used to iterate through a number group, and the label is added repeatedly. Syntax: < label V-for = “variable name in array name” >

<! - this is the View part of the binding Model of data - > < table id = "app" > < tr > < th > name < / th > < th > gender < / th > < th > age < / th > < / tr > <! - here the tr will appear more - > < tr v - for = "person in persons" > < td > {{person. Name}} < / td > < td > {{person. Sex}} < / td > < td > {{person. Age}} < / td > </tr> </div> <script type="text/javascript"> var vue = new vue ({el:'#app', Data: {/ part/Model persons: [{name: 'zhang' sex: 'male' age: 20}, {name: 'bill' sex: 'female' and the age: 22}, {name: 'Cathy' sex: 'male' age: 26}]}}); </script>Copy the code

V – the bind command

V-bind can work with attributes of HTML tags, using expressions to bind different attribute values.

<style type="text/ CSS ">. Redbg {background: red}. Greenbg {background: green} </style>Copy the code

Add v-bind:class= “person. Sex == ‘male’? ‘ReDBG’ : ‘greenbg’ “enables men and women to display different background colors

V – on command

The V-ON directive enables binding of events. Note: the function here needs to be defined in the methods parameter of the Vue object

<table id="app"> <tr v-for="person in persons" v-bind:class="person. Sex ==' male '? 'redbg':'greenbg'" v-on:click="sayHi(person.name)"> <td>{{person.name}}</td> <td>{{person.sex}}</td> <td>{{person.age}}</td> </tr> </div> <script type="text/javascript"> Data: {/ part/Model persons: [{name: 'zhang' sex: 'male' age: 20}, {name: 'bill' sex: 'female' and the age: 22}, {name: 'Cathy' sex: 'male' age: 26}]}. methods:{ sayHi:function(name){ alert("Hi!" +name); }}}); </script>Copy the code

Click events are added here for each row

conclusion

That’s the end of this article, give it a like if it was useful to you 🙂