<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book List</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>书名</th>
<th>作者</th>
<th>性别</th>
<th>价格</th>
<th>时间</th>
<th>状态</th>
</tr>
<tr v-for="book in books" :key="book.id">
<td>{{ book.id }}</td>
<td>{{ book.name }}</td>
<td>{{ book.author }}</td>
<td>{{ book.gender === 1 ? '女' : '男' }}</td>
<td>{{ book.price }} 元</td>
<td>{{ book.time }}</td>
<td v-if="book.price > 30">有点小贵</td>
<td v-else>价格亲民</td>
</tr>
</table>
</div>
<script>
new Vue({
el: "#app",
data: {
books: [{
"id": "1",
"author": "小华",
"gender": 1,
"name": "《春天来了》",
"price": "23",
"time": "1998-03-12"
}, {
"id": "2",
"author": "老舍",
"gender": 2,
"name": "《济南的冬天》",
"price": "32",
"time": "1956-12-09"
}, {
"id": "3",
"author": "朱自清",
"gender": 2,
"name": "《背影》",
"price": "40",
"time": "1943-09-12"
}]
}
});
</script>
</body>
</html>
扫一扫
521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
