【VUE】--实现选项卡切换高亮显示

最新推荐文章于 2024-08-04 03:35:21 发布

安卓逆向小能手

最新推荐文章于 2024-08-04 03:35:21 发布

阅读量1.2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43067223/article/details/90044327

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_HelloWorld</title>
</head>
<style>
	span.active{
		color: red;
	}
</style>
<body>

<!--模板-->
<div id="test">
  <span v-for='(obj,index) in test' :key='obj.id' :class='{active:textIndex==obj.id-1}' @click="changeText(index)">
		{{obj.name}}  	
  </span>
</div>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
  	el:'#test',
  	data(){
  		return{
  			test:[
  				{'id':1,'name':'首页'},
  				{'id':2,'name':'Ui'},
  				{'id':3,'name':'车辆'}
  			],
  			textIndex:0
  		}
  	},
  	methods:{
  		changeText(index){
  			console.log(index)
  			this.textIndex = index;
  		}
  	}
  })
</script>
</body>
</html>