本系列博客汇总在这里：Vue.js 汇总

源码工程文件为：

一、需求说明

点击那个选项，那个就变成红色，也就是所谓的选中状态。
Vue.js_25_小练习_vue.js

二、代码实现 
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
		.active 
		 {
			color: red;
		 }
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item, index) in books" :class="{active: currentIndex === index}" @click="liClick(index)">【{{index}}】{{item}}</li>
			</ul>
		</div>

		<script src="../js/vue.js"></script>
		<script>
			let app = new Vue
			({
				el: "#app",
				data: 
				{
					books: ["西游记", "山海经", "三国", "水浒"],
					currentIndex: 0
				},
				methods:
				{
					liClick(index) 
					{
						this.currentIndex = index
					}
				}
			})
		</script>
	</body>
</html>

Vue.js_25_小练习_工程文件_02

如有错误，欢迎指正！