下面來繼續記錄並分享vue相關：
vue也是具有循環和判斷的，v-for循環遍歷的用法如下所示：
一、遍歷數組
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>vue-input-demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<script type="text/javascript">
var for_demo = new Vue({
el: '#demo',
data: {
items: [
{ message: 'red' },
{ message: 'yello' },
{ message: 'green'}
]
}
})
</script>
<body>
<div id="for_demo">
<ul id="demo">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
</div>
</body>
</html>
二、遍歷屬性
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>vue-input-demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<script type="text/javascript">
var for_demo = new Vue({
el: '#demo',
data: {
parentMessage: 'Parent',
items: [
{ message: 'one' },
{ message: 'two' }
]
}
})
</script>
<body>
<div id="for_demo">
<ul id="demo">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
</div>
</body>
</html>
三、遍歷對象
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>vue-input-demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<script type="text/javascript">
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'how to use vue',
author: 'wxy_jdhk',
publishedAt: '2019-10-14'
}
}
})
</script>
<body>
<div id="for_demo">
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
</body>
</html>
四、v-for與templet
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>vue-input-demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<script type="text/javascript">
new Vue({
el: '#for_demo',
data: {
items: [
{ msg: 'red' },
{ msg: 'blue' }
]
}
})
</script>
<body>
<div id="for_demo">
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
</div>
</body>
</html>