Vue.js Common Instruction Summary (v-if, v-for, etc.) _javascript skills

Sometimes too many instructions will cause errors, the problem of mixing, so this article in memory will be interspersed with the memory of the way, cross ratio, not easy to make mistakes.

This article is mainly about six instructions:

V-if//v-show//v-else//v-for//v-bind//v-on

1. v-if Conditional rendering instruction, judging whether the element is rendered according to the bool value of the subsequent expression;

eg

Html:

<div id= "example01" >
 <p v-if= "male" >Male</p>
 <p v-if= "female" >Female</p>
 <p v-if= "age>25" >Age:{{age}}</p>
 <p v-if= "Name.indexof" (' Lin ') >0 ">name:{{name}" }</p>
</div>

Js:

var vm= new Vue ({
 el: "#example01",
 data:{
  male:true,
  female:false,
  age:29,
  name: ' Colin '
 }
 })

Page Render Effect:

So, the v-if instruction only renders the element with the expression "true" behind him; the v-show instruction is introduced here because the difference is that the v-show instruction renders the element with false expression behind it, adding CSS code to the element: style= "Display:none "; Change the instance code above v-if to V-show, and the page renders as:

2, V-show is similar to v-if , it only renders elements with false expressions behind them, and adds CSS code to such elements: style= "Display:none";

3, V-else must follow the v-if/v-show instruction, otherwise it will not work;

If the expression of the v-if/v-show instruction is true, the else element is not displayed, or if the expression of the v-if/v-show instruction is false, the else element is displayed on the page;

eg

<div id= ' app ' >
 
 

<script>
 var vm = new Vue ({
 el: ' #app ',
 data: {
  age:21,
  name: ' Keepcool ',
  sex: ' Male '
 }
 })
</script>

4, V-for similar to the traversal of JS, the use of v-for= "item in Items", items are arrays, item array elements.

eg

Css:

<style>
table,th,tr,td{
  border:1px solid #ffcccc;
  border-collapse:collapse;
 }
</style>

Html:

<div id= "example03" >
 <table>
 <thead>
 <tr>
  <th>Name</th>
  <th>Age</th>
  <th>Sex</th>
 </tr>
 </thead>
 <tbody >
 <tr v-for= "person in people" >
  <td>{{person.name}}</td>
  <td>{{ Person.age}}</td>
  <td>{{person.sex}}</td>
 </tr>
 </tbody>
 </table>
</div>

Js:

<script>
 var vm = new Vue ({
 el: ' #example03 ',
 data: {
  people: [{
  name: ' Jack ',
  age :
  sex: ' Male '
  }, {
  name: ' Bill ',
  age:26,
  sex: ' Male '
  }, {
  name: ' Tracy ',
  age:22,
  sex: ' Female '
  }, {
  name: ' Chris ',
  age:36,
  sex: ' Male '}
  ]
 }
</script>

Page effect:

5, V-bind This instruction to update HTML attributes in response, such as a style style that binds a class element or element.

eg, the effect of highlighting the current number of pages in the paging feature, you can use the bind command.

<ul class= "pagination" >
  <li v-for= "N in PageCount" >
   <a href= "javascripit:void (0)" V-bind: class= "Activenumber = = n + 1?" ' Active ': ' ">{{n + 1}}</a>
  </li>
  </ul>

6, v-on is used to listen for DOM events of the specified element, such as click events.

eg

<div id= "Example04" >
 <input type= "text" v-model= "message" >
 <button v-on:click= "greet" > Greet</button>
 <!--v-on Instructions can be abbreviated to @ symbol-->
 <button @click = "Greet" >greet Again</button >
 </div>

<script>
 var exampledata04={message
 : "Nice meeting U"
 };
 var vm2=new Vue ({
 el: "#example04",
 data:exampledata04,
 methods:{
  greet:function () {
  alert (this.message);}}
 )
</script>

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.