vue中点击某条数据如何改变这条数据样式

可以使用Vue的事件绑定和样式绑定来实现。

1. 在模板中使用v-bind:class绑定样式类

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index" :class="{active: activeIndex === index}" @click="changeActive(index)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

这里使用v-for指令渲染一个列表，对每个列表项绑定一个点击事件，同时使用v-bind:class绑定一个样式类，样式类的名称为active，绑定的条件是当前项的索引值等于activeIndex。

2. 在组件中声明activeIndex和changeActive方法

<script>
  export default {
    data () {
      return {
        list: ['item1', 'item2', 'item3', 'item4'],
        activeIndex: null
      }
    },
    methods: {
      changeActive (index) {
        this.activeIndex = index
      }
    }
  }
</script>

这里声明了一个activeIndex变量和一个changeActive方法，changeActive方法接收一个参数index，用于更新activeIndex的值，从而改变样式。

3. 在样式表中定义.active类

<style>
  .active {
    background-color: red;
  }
</style>

这里定义了一个.active类，当该类被绑定到一个元素上时，该元素的背景色会变为红色。

这样，当用户点击列表项时，会触发changeActive方法，更新activeIndex的值，从而改变绑定的样式类，从而实现改变样式的效果。