1.vue.js学习笔记-列表渲染和控制样式

使用v-bind：和v-for完成列表渲染和控制样式，使列表第一个内容默认为红色，点击哪个哪个变红色。
思路：首先要解决第一个默认为红色，通过定义一个变量来与当前的index作比较，如果相同就变成个红色，接下来我们获取每次点击的列表的索引值并且然后赋值给我们定义的变量就可以了。

<div id="app">
	<ul>
		<li  @click="clickChange(index)" :class="{active:indexs === index}" v-for="(item,index) in arr">{{item}}</li>
	</ul>
</div>
<script type="text/javascript">
		const vm = new Vue({
			el:"#app",
			data:{
				indexs:0,
				arr:["死神","海贼王","火影忍者","进击的巨人"]
			},
			methods:{
				clickChange(index){
					this.indexs = index;
				}
			}
		})
	</script>