自学vuejs的练习，点击li让其绑定一个class

最新推荐文章于 2024-05-05 00:48:49 发布

得做有氧

最新推荐文章于 2024-05-05 00:48:49 发布

阅读量155

点赞数

分类专栏： vusjs 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44474200/article/details/106035046

版权

vusjs 专栏收录该内容

15 篇文章 0 订阅

订阅专栏


<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<style>
	.active{
		color:red
	}
	</style>
<div id="app">
	<ul>
		<li v-for="(m,index) in colors" 
			:class ="{active:currentInderx === index}" @click = "doClick(index)">
			{{index}}-{{m}}
		</li>
	</ul>
</div>
	

<script>
new Vue({
  el: '#app',
  data: {
    colors: ['1','2','3','4','5'],
	  currentInderx:0
  },
	methods: {
	doClick(index){
		this.currentInderx = index;
  }
 }
})
</script>
</body>