vue遍历文本,选中变色

Vue是一个用于构建用户界面的渐进式JavaScript框架。如果要遍历文本并选中变色，可以使用v-for指令和v-bind样式绑定。

首先，在Vue实例中定义一个文本列表，例如：

data() {
  return {
    texts: ['文本1', '文本2', '文本3', '文本4'],
    selectedText: '',
  }
},

然后，使用v-for指令来遍历文本列表，并将每个文本绑定到一个span元素中：

<template>
  <div>
    <span
      v-for="text in texts"
      :key="text"
      :class="{ 'selected': text === selectedText }"
      @click="selectedText = text"
    >
      {{ text }}
    </span>
  </div>
</template>

<style>
  .selected {
    color: red;
  }
</style>

在这里，v-for指令会根据文本列表的长度循环创建span元素，每个元素的内容为对应的文本。使用v-bind:class绑定样式时，通过判断当前文本是否和选中的文本相等来动态添加selected类，从而改变选中文本的颜色。点击每个文本时，将其赋值给selectedText变量，触发样式的更新。

以上就是Vue遍历文本并选中变色的实现方法。通过对比和绑定样式，可以轻松实现文本选中后的变色效果。