vue.js 教程(六)一定要懂for loop

在写教学的过程中很囧的一件事就是,教学还没写完新版本就诞生了,这就是我中途又去忙了一个多月之后,回来发现的第一件囧事,是的, Vue.js 2.0 释出了,所以我花了一点时间概略地再看了一下,还有之前写的五篇教学。

所幸,因为我写的是快速上手,都是基本用法与观念,在新版的Vue.js变化不大,不影响之前五篇的教学范例,所以已经看了这系列教学的朋友其实不用太担心,我也将教学里面本来使用1.0.26版本的Vue.js,全数都改成了2.0.1版本的Vue.js了。

好了,这篇我们要来学一个跟if一样很重要的东西,就是所谓的for,通常你学一个新的程式语言,不管你怎么学,都会看到if else跟for这两个东西,也就是说当你学一个新语言,这两个东西一定是在必定要学、要看的范围里,所以本篇我们再来看看for loop吧!

for loop通常是用来处理列表或是重复输出一样格式的元素时在使用的,比方说我要在页面上产生10个div、10个li,或是输出九九乘法表这类的资料时, for loop就是你肯定要使用的第一选择了!首先我们先来看看如何输出1~10吧!

<!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>

上面这段code执行后你会发现在页面会出现“12345678910”,有没有觉得超简单?看不懂?,其实我在span这里加上了v-for属性,属性值里面写的意思是“变数n在10里面”,然后样本{{ n }}则是输出n这个变数,所以vue.js自然就会知道我的n要从1开始,一直跑到10,自然页面上就会输出1~10了。如果你不是用Vue.js v2,你是用v1例如版本1.0.26,那n的变数会从0开始输出10个数字,你就会得到“0123456789”,所以如果你想要从1开始记得用n+1喔。

那要怎么写出九九乘法呢?我跟你说,真的超简单,就用上面那个范例再多几行就结束了!

<!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>

真的!就这样四行,九九乘法就搞定了!有没有超简单?当然一般用v-for不光只是要输出数字而已,就像我开头有说for loop,通常拿来输出列表用的,那假设我们有一个表是苹果、香蕉、椰子,那我们要怎么用v- for输出呢?很简单,我们只要把苹果、香蕉、椰子放进data里,我们就可以输出在页面了,以下就是范例。

<!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>
是的,所以我们把苹果、香蕉、椰子这些资料放进data里,取名items,然后在v-for属性里设定一个变数叫item(你要改叫n或改叫i都行),然后就会开始输出items的第一个、第二个、第三个,而当前items里的第一个值、第二个值、第三个值就会自动带入item中,然后第一、第二、第三的一二三,我们称之为index,也就是目录顺序的意思,有需要也是可以输出的。

在举一个例子,比方说地址好了,台北市里面有中山区、大同区、中正区,这样资料要怎么放进data里?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>0 Hello World</title>
</head>
<body>

<div id=”app”>
<ul>
<li v-for=”(item, index) in items”>
{{ parentMessage }} – {{ index }} – {{ item.message }}
</li>
</ul>
</div>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js”></script>
<script>
new Vue({
el:’#app’,
data: {
parentMessage: ‘台北市’,
items: [
{ message: ‘中正區’ },
{ message: ‘中山區’ },
{ message: ‘大同區’ }
]
}
});
</script>
</body>
</html>

这时候我们就可以用perantMessage来带入台北市这样的资料,然后上述的范例我也把index输出在画面上,你可以明确看到index的用途,最后,“item in items”这里的in你要改成of 也是没问题的,效果是一样的,v-for的用法就介绍到这里,用法真的不难,只是要如何运用得好就真的不是一件简单的事了。

希望到目前为止的教学可以让你觉得得心应手、上手无障碍喔!

Author: bwh

发表评论