vue动态点击切换css样式

<template>
	<div v-for="i in 5" 
         class="el-personal" 
         :class="{active:isActive==i}"
         @click="show(i)">
		切换css样式
	</div>
</template>
<script>
    export default {
    	data() {
				return {
					isActive: 0,
				}
			},
    	  methods: {
      		show(i) {
				this.isActive = i
				}
      		}
    	}
</script>
<style lang="scss" scoped>
    .el-personal{
        width:100px;
        height:100px;
        background:red;
    }
    .active{
        background:blue;
    }
</style>
Logo

前往低代码交流专区

更多推荐