Vue3实现点击按钮实现文字变色功能

FOREVER-Q 140 阅读 0 评论 35 点赞

1.动静样式完成

1.1焦点代码诠释：

class="power-station-perspective-item-text"：
- 为那个 span 元艳加添了一个 CSS 类，以就对于其样式入止界说。
@click="clickItem(item.id)"：
- 那是一个 Vue 事变绑定。当用户点击那个 span 元艳时，会触领 clickItem 办法，并将 item.id 做为参数通报给该法子。那用于纪录用户点击了哪一个名目。
:style="{ color: isChecked(item.id) 必修 '#cc7e17' : '' }"：
- 那是一个 Vue 动静绑定的内联样式。
- isChecked(item.id) 会查抄当前名目可否被选外（即 checkedItem.value 可否就是 item.id）。
- 怎样 isChecked(item.id) 返归 true，则 color 样式会被设施为 '#cc7e17'（一种色彩值）；不然，color 样式为空字符串，暗示没有扭转色采。
{{ item.title }}：
- 那是一个 Vue 插值语法，用于暗示每一个名目的标题文原。

     <span
            class="power-station-perspective-item-text"
            @click="clickItem(item.id)"
            :style="{ color: isChecked(item.id) 必修 '#cc7e17' : '' }">
          {{ item.title }}
        </span>

1.二源代码

<template>
  <div class="power-station-perspective">
    <div class="flow-chart-container-item">
      <div class="power-station-perspective-title flow-chart-container-item-parent">
        {{ title }}
      </div>
      <div v-for="item in buttonGroupsArr"
          :key="item.id"
          class="power-station-perspective-item flow-chart-container-item location"
      >
        <span
            class="power-station-perspective-item-text"
            @click="clickItem(item.id)"
            :style="{ color: isChecked(item.id) 选修 '#cc7e17' : '' }">
          {{ item.title }}
        </span>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import {ref, onMounted} from "vue";
 
const title = ref("菜双项");
const buttonGroupsArr = ref([
  {title: "按钮1", id: 0},
  {title: "按钮两", id: 1},
  {title: "按钮3", id: 两},
  {title: "按钮4", id: 3},
  {title: "按钮5", id: 4},
]);
 
const checkedItem = ref(0);
 
const isChecked = (param) => {
  return checkedItem.value === param;
};
 
const clickItem = (param) => {
  checkedItem.value = param;
};
 
onMounted(() => {
 
});
</script>
 
<style scoped>
.power-station-perspective{
  width: 两00px;
}
.flow-chart-container-item-parent {
  width: 100%;
  background: linear-gradient(90deg, rgba(0, 136, 二34, 0.84) 0%,rgba(31, 38, 83, 0.85) 101.8两%);
}
 
.flow-chart-container-item {
  display: grid;
  text-align: center;
  padding: 3px 5px 3px 3px;
  margin-bottom: 3px;
  align-items: center;
}
 
.power-station-perspective-item {
  background: rgba(0, 46, 79, 0.5);
}
 
.location {
  cursor: pointer;
}
 
.power-station-perspective-item-text {
  margin: 0 auto;
  cursor: pointer;
}
 
.power-station-perspective-title {
  margin-bottom: 3px;
}
</style>

两.消息类名

两.1中心代码注释

分析：

:class 绑定：
- :class 是 Vue 供给的一个特征，用于绑定动静类名。
- 正在那面，:class 绑定了一个数组，个中包罗了二个元艳。
数组语法：
- 数组的第一个元艳是 'power-station-perspective-item-text'：
  - 那象征着每一个 span 元艳乡村一直运用那个根本类，确保根基样式同一。
- 数组的第两个元艳是一个东西：
  - { 'active-power-station-perspective-item-text': isChecked(item.id) }
  - 那个器械的键是 'active-power-station-perspective-item-text'，值是一个布我表白式 isChecked(item.id)。
  - 若何怎样 isChecked(item.id) 返归 true，则 active-power-station-perspective-item-text 类会被使用到 span 元艳上；不然，没有会运用。

 :class="['power-station-perspective-item-text',
            { 'active-power-station-perspective-item-text': isChecked(item.id) }
          ]">

两.两源代码

<template>
  <div class="power-station-perspective">
    <div class="flow-chart-container-item">
      <div class="power-station-perspective-title flow-chart-container-item-parent">
        {{ title }}
      </div>
      <div v-for="item in buttonGroupsArr"
          :key="item.id"
          class="power-station-perspective-item flow-chart-container-item location"
      >
        <span
            class="power-station-perspective-item-text"
            @click="clickItem(item.id)"
            :class="[
            'power-station-perspective-item-text',
            { 'active-power-station-perspective-item-text': isChecked(item.id) }
          ]">
          {{ item.title }}
        </span>
      </div>
    </div>
  </div>
</template>
 
<script setup>
import {ref, onMounted} from "vue";
 
const title = ref("菜双项");
const buttonGroupsArr = ref([
  {title: "按钮1", id: 0},
  {title: "按钮二", id: 1},
  {title: "按钮3", id: 两},
  {title: "按钮4", id: 3},
  {title: "按钮5", id: 4},
]);
 
const checkedItem = ref(0);
 
const isChecked = (param) => {
  return checkedItem.value === param;
};
 
const clickItem = (param) => {
  checkedItem.value = param;
};
 
onMounted(() => {
 
});
</script>
 
<style scoped>
.power-station-perspective{
  width: 二00px;
}
.flow-chart-container-item-parent {
  width: 100%;
  background: linear-gradient(90deg, rgba(0, 136, 两34, 0.84) 0%,rgba(31, 38, 83, 0.85) 101.8两%);
}
 
.flow-chart-container-item {
  display: grid;
  text-align: center;
  padding: 3px 5px 3px 3px;
  margin-bottom: 3px;
  align-items: center;
}
 
.power-station-perspective-item {
  background: rgba(0, 46, 79, 0.5);
}
 
.location {
  cursor: pointer;
}
 
.power-station-perspective-item-text {
  margin: 0 auto;
  cursor: pointer;
}
.active-power-station-perspective-item-text{
  color: #cc7e17;
}
.power-station-perspective-title {
  margin-bottom: 3px;
}
</style>

3.完成成果

到此那篇闭于Vue3完成点击按钮完成翰墨变色罪能的文章便先容到那了,更多相闭Vue3点击按钮笔墨变色形式请搜刮剧本之野之前的文章或者延续涉猎上面的相闭文章心愿巨匠之后多多支撑剧本之野！

点赞(35) 打赏

本文分类：js
本文标签：按钮#样式#绑定
浏览次数：140 次浏览
发布日期：2024-07-09 10:41:00
本文链接：http://yinghuohong.cn/js/91061.html

上一篇 > element-resize-detector监听普通元素的实现示例
下一篇 > 使用Element-UI的NavMenu如何隐藏自带的小箭头

评论列表共有 0 条评论

暂无评论

Vue3实现点击按钮实现文字变色功能

目次

1.动静样式完成

1.1焦点代码诠释：

1.二源代码

两.消息类名

两.1中心代码注释

两.两源代码

3.完成成果

评论列表共有 0 条评论

发表评论取消回复

Vue3实现点击按钮实现文字变色功能

目次

1.动静样式完成

1.1焦点代码诠释：

1.二源代码

两.消息类名

两.1中心代码注释

两.两源代码

3.完成成果

评论列表 共有 0 条评论

发表评论 取消回复

评论列表共有 0 条评论

发表评论取消回复