vuejs7-v-for指令
导读:本文共1292.5字符,通常情况下阅读需要4分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: <!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></ti... ...
目录
(为您整理了一些要点),点击可以直达。- (1):<html>
- (2):<head>
- (6):</head>
- (7):<body>
- (9): <table>
- (10): <thead>
- (11): <tr>
- (12): <th>Name<
- (13): <th>Age<
- (14): <th>Sex<
- (15): </tr>
- (16): </thead>
- (17): <tbody>
- (18): <tr v-for="
- (19): <td>{{ pers
- (20): <td>{{ pers
- (21): <td>{{ pers
- (22): </tr>
- (23): </tbody>
- (24): </table>
- (25): </div>
- (32): name: 'Jack
- (33): age: 30,
- (34): sex: 'Male
- (35): }, {
- (36): name: 'Bill
- (37): age: 26,
- (38): sex: 'Male
- (39): }, {
- (40): name: 'Tracy&
- (41): age: 22,
- (42): sex: 'Female&
- (43): }, {
- (44): name: 'Chris&
- (45): age: 36,
- (46): sex: 'Male
- (47): }]
- (51):</body>
- (52):</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<div id="app">
<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>
<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
people: [{
name: 'Jack',
age: 30,
sex: 'Male'
}, {
name: 'Bill',
age: 26,
sex: 'Male'
}, {
name: 'Tracy',
age: 22,
sex: 'Female'
}, {
name: 'Chris',
age: 36,
sex: 'Male'
}]
}
});
</script>
</body>
</html>
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
vuejs7-v-for指令的详细内容,希望对您有所帮助,信息来源于网络。