数据准备:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gamacode.com</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
let app = new Vue({
el : '#app',
data : {
foods : ['Python','Laravel','VueJS'],
posts : [
{id: 1, title: 'Python3', body: '现代最受欢迎的编程语言'},
{id: 2, title: 'Laravel5.8', body: '最流行的PHP开发框架之一'},
{id: 3, title: 'Vue2.0', body: '渐进式前端框架'}
]
}
});
</script>
</body>
</html>
列表遍历:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gamacode.com</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="food in foods">{{ food }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
let app = new Vue({
el : '#app',
data : {
foods : ['Python','Laravel','VueJS'],
posts : [
{id: 1, title: 'Python3', body: '现代最受欢迎的编程语言'},
{id: 2, title: 'Laravel5.8', body: '最流行的PHP开发框架之一'},
{id: 3, title: 'Vue2.0', body: '渐进式前端框架'}
]
}
});
</script>
</body>
</html>
模块遍历:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gamacode.com</title>
</head>
<body>
<div id="app">
<div class="post" v-for="post in posts">
<h3>{{ post.title }}</h3>
<p>{{ post.body }}</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
let app = new Vue({
el : '#app',
data : {
foods : ['Python','Laravel','VueJS'],
posts : [
{id: 1, title: 'Python3', body: '现代最受欢迎的编程语言'},
{id: 2, title: 'Laravel5.8', body: '最流行的PHP开发框架之一'},
{id: 3, title: 'Vue2.0', body: '渐进式前端框架'}
]
}
});
</script>
</body>
</html>
循环之LoopIndex:
<div class="post" v-for="(post,index) in posts">
<h3>{{ post.title }}<span v-if="index === 0" style="color:orangered">今日头条</span></h3>
<p>{{ post.body }}</p>
</div>
Json数据的遍历:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gamacode.com</title>
</head>
<body>
<div id="app">
<div v-for="(value,property) in courses">
<h3>{{ property }}</h3>
<p>{{ value }}</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
let app = new Vue({
el : '#app',
data : {
loaded: false,
posts : null,
courses : {
Python : '编程语言',
Laravel : 'PHP框架',
Vue : '前端三巨头之一',
}
}
});
</script>
</body>
</html>