列表渲染

列表渲染

<div id="app">
			<h1>图书管理系统</h1>
			<table>
				<thead>
					<tr>
						<th>书名</th>
						<th>作者</th>
						<th>价格</th>
						<th>标签</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="book in books">
						<td>{{ book.name }}</td>
						<td>{{ book.author }}</td>
						<td>{{ book.price }}</td>
						<td>{{ book.tag }}</td>
						<td><button>删除</button></td>
					</tr>
				</tbody>
			</table>
	</body>
	
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				books:[
					{id:1,name:"《三国演义》",author:"罗贯中",price:"99.99",tag:"经典"},
					{id:2,name:"《红楼梦》",author:"曹雪芹",price:"88",tag:"推荐"},
					{id:3,name:"《水浒传》",author:"施耐庵",price:"77",tag:"热销"},
					{id:4,name:"《西游记》",author:"吴承恩",price:"60",tag:"经典"}
				],
			}
		})
	</script>