vue动态加颜色并跳转对应的标题

html+css

<style>
	ul,li{
		list-style: none;
	}
	ul,li{
		display:inline-block;

	}
	li{
		cursor: pointer;
		height:35px;
		width:150px;
		background-color:#dde;
		margin-left:10px;
		text-align: center;
		line-height:35px;
	}
	.colors{
		background-color:palevioletred;
	}
</style>

	<div id="my">
		<ul v-for="(item,i) in getData" @click="showDta(item)">
			
			<li :class="{colors:changeColor == i}" @click="change(i)">
				{{item.title}}
			</li>
		</ul>
		<div>{{list}}</div>
	</div>

new Vue({
			el:'#my',
			data:{
				getData:[{title:"我是标题0"},{title:"我是标题1"},{title:"我是标题2"},{title:"我是标题3"},{title:"我是标题4"},{title:"我是标题5"}],
				list:"我是标题0",
				changeColor:0,
			},
			methods:{
				showDta(i){
					this.list = i.title;
				},
				change(i){
					this.changeColor = i;
				}
			},
			mounted:function(){
				// console.log(this.getData[0].title);
				// this.showDta(this.getData[0].title);
				this.getList();
			},

		})

如图