Understand For loop in Vue
For loop is usually used to process the list or repeat the output of the same format elements to use, for example, I want to produce 10 div on the page, 10 li, or output nine nine multiplication table of such information, for loop is the first choice you must use! First let’s see how to output 1 ~ 10! After the above code execution you will find in the page there will be “12345678910”, there is no super simple? can not read it? , In fact, I added the v-for property here in span, which means “variable n is inside 10” and sample {{n}} is output variable n, so vue.js will naturally Know that my n to start from 1, has been to 10, the natural page will output 1 to 10 of the. If you are not using Vue.js v2 and you are using v1 version 1.0.26, then the n variable will output 10 numbers starting from 0 and you will get “0123456789”, so if you want to remember from 1 n + 1 Oh. How to write a ninety-nine multiplication? I tell you, really super simple, just use the example above a few more lines is over!<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
</head>
<body>
<div id="app">
<span v-for="n in 10">{{ n }}</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script>
new Vue({
el:'#app'
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
</head>
<body>
<div id="app">
<div v-for="i in 9">
<h3>{{ i }}</h3>
<div v-for="j in 9">{{ i }} x {{ j }}={{ i*j }}</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<script>
new Vue({
el:'#app'
});
</script>
</body>
</html>
Really! So four lines, ninety-nine multiplication to get! Is there any super simple? Of course, the general use of v-for not only just to output the numbers just like I said for loop at the beginning, usually used to output the list, then suppose we have a table is apple, banana, coconut, then how do we use v- for output? Very simple, we just put the apple, banana, coconut into the data, we can output the page, the following is an example. Yes, so we put apples, bananas, coconut and other data into the data, named items, and then set a variable in the v-for attribute called item (you want to change n call or call i change line), and then Will begin to output items first, second, third, and the current items in the first value, the second value, the third value will be automatically brought into the item, and then the first and second , The third one two three, we call index, that is, the meaning of the directory order, there is a need can output. In an example, for example, the address is good, there are Zhongshan City in Taipei, Datong District, Zhongzheng District, how such information into the data Lane? This time we can use perantMessage to bring such information to Taipei, and then I also put the index output on the screen in the above example, you can clearly see the purpose of the index, and finally, "item in items" where you want to To change the of is no problem, the effect is the same, v-for usage introduced here, usage is not difficult, but how to use well is really not a simple matter, and hope so far Teaching can make you feel handy, easy to get started Oh! <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
items: [
{ message: 'Apple' },
{ message: 'banana' },
{ message: 'Coconut' }
]
}
});
</script>
</body>
</html>
