vue项目点击元素后如何改变样式

<view class="z-tr" v-for="(item,index) in productList" :key="item.id">
	  <view class="z-td">{{index + 1 }}</view>
	  <view class="z-td" :class="{'visited':isvisited==index}" @click="visitfun(index)">{{ item.productname }}</view>
	  <view class="z-td text-green">{{ item.successmessage }}</view>
	  <view class="z-td text-red">{{ item.faillmessage }}</view>
 </view>

data() {
		return {
			isvisited: -1,
			}
		}

methods: {
	visitfun(index){
		this.isvisited=index;
	},
}

<style>
	.visited{
			color: blue;
		}
</style>

<template>
  <div :style="{background:yanse,width:kuai,height:gao+'px'}">
  </div>
</template>
<script>
export default {
    data(){
        return{
            yanse:"red",
            kuai:"100px",
            gao:100
        }
    }
}
</script>
<style>
</style>

<template>
  <div :class='state?"red":"blue"'>
  </div>
</template>
<script>
export default {
    data(){
        return{
            state:true,
        }
    }
}
</script>
<style>
    .red{
        width: 100px;
        height: 100px;
        background: red;
    }
    .blue{
        width: 100px;
        height: 100px;
        background: blue;
    }
</style>