点击后数据变化vue_vue点击当前li 让它变红色

点击后数据变化是指在网页中点击某个元素后，通过改变其对应的数据，实现页面的交互效果。在Vue中，可以通过绑定事件和使用数据绑定来实现点击后数据的变化。

在Vue中可以使用v-on指令来绑定事件，当某个元素被点击时，可以执行相应的事件处理函数。在事件处理函数中，可以修改数据的值，从而实现点击后数据的变化。

例如，假设有一个列表，每个列表项都是一个li元素，点击某个li元素后，可以将其背景色变为红色。需要在Vue实例中定义一个data属性来保存当前li元素的状态，例如isClicked为false表示未点击，为true表示已点击。然后，在li元素上绑定一个click事件，当li元素被点击时，执行一个方法来修改isClicked的值。使用v-bind指令将li元素的背景色与isClicked属性进行绑定，当isClicked为true时，li元素的背景色变为红色。

示例代码如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" 
          :key="index"
          :style="{ backgroundColor: item.isClicked ? 'red' : 'white' }"
          @click="handleClick(item)">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { text: 'item 1', isClicked: false },
        { text: 'item 2', isClicked: false },
        { text: 'item 3', isClicked: false }
      ]
    }
  },
  methods: {
    handleClick(item) {
      item.isClicked = !item.isClicked;
    }
  }
}
</script>

在上述示例代码中，通过v-for指令遍历list数组，生成对应的li元素。使用v-bind指令将li元素的背景色与item.isClicked属性进行绑定，当item.isClicked为true时，li元素的背景色变为红色；当item.isClicked为false时，li元素的背景色为白色。使用@click指令绑定点击事件，当li元素被点击时，执行handleClick方法来修改item.isClicked的值。

这种点击后数据变化的方式在实际开发中非常常见，可以用于实现各种交互效果，比如点击按钮后显示/隐藏某个元素，点击菜单项后切换选中状态等。通过Vue的数据绑定和事件绑定机制，可以轻松实现点击后数据变化的功能。