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

釼鉎镝鎢鍏鉼

1.动态样式实现


1.1核心代码解释：

• 1. class="power-station-perspective-item-text"

  复制代码
  ：
  
  
  
  • 为这个
    1. span

    复制代码
    元素添加了一个 CSS 类，以便对其样式进行定义。
    
  
  
• 1. @click="clickItem(item.id)"

  复制代码
  ：
  
  
  
  • 这是一个 Vue 事件绑定。当用户点击这个
    1. span

    复制代码
    元素时，会触发
    1. clickItem

    复制代码
    方法，并将
    1. item.id

    复制代码
    作为参数传递给该方法。这用于记录用户点击了哪个项目。
    
  
  
• 1. :style="{ color: isChecked(item.id) ? '#cc7e17' : '' }"

  复制代码
  ：
  
  
  
  • 这是一个 Vue 动态绑定的内联样式。
    
  • 1. isChecked(item.id)

    复制代码
    会检查当前项目是否被选中（即
    1. checkedItem.value

    复制代码
    是否等于
    1. item.id

    复制代码
    ）。
    
  • 如果
    1. isChecked(item.id)

    复制代码
    返回
    1. true

    复制代码
    ，则
    1. color

    复制代码
    样式会被设置为
    1. '#cc7e17'

    复制代码
    （一种颜色值）；否则，
    1. color

    复制代码
    样式为空字符串，表示不改变颜色。
    
  
  
• 1. {{ item.title }}

  复制代码
  ：
  
  
  
  • 这是一个 Vue 插值语法，用于显示每个项目的标题文本。
    
  
  

1.      <span
   
2.             class="power-station-perspective-item-text"
   
3.             @click="clickItem(item.id)"
   
4.             :style="{ color: isChecked(item.id) ? '#cc7e17' : '' }">
   
5.           {{ item.title }}
   
6.         </span>

复制代码

1.2源代码

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
   
2.             class="power-station-perspective-item-text"
   
3.             @click="clickItem(item.id)"
   
4.             :style="{ color: isChecked(item.id) ? '#cc7e17' : '' }">
   
5.           {{ item.title }}
   
6.         </span>      </div>    </div>  </div></template> <script setup>import {ref, onMounted} from "vue"; const title = ref("菜单项");const buttonGroupsArr = ref([  {title: "按钮1", id: 0},  {title: "按钮2", id: 1},  {title: "按钮3", id: 2},  {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: 200px;}.flow-chart-container-item-parent {  width: 100%;  background: linear-gradient(90deg, rgba(0, 136, 234, 0.84) 0%,rgba(31, 38, 83, 0.85) 101.82%);} .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>

复制代码

2.动态类名


2.1核心代码解释

说明：

• 1. :class

  复制代码
  绑定：
  
  
  
  • 1. :class

    复制代码
    是 Vue 提供的一个特性，用于绑定动态类名。
    
  • 在这里，
    1. :class

    复制代码
    绑定了一个数组，其中包含了两个元素。
    
  
  
• 数组语法：
  
  
  
  • 数组的第一个元素是
    1. 'power-station-perspective-item-text'

    复制代码
    ：
    
    
    
    • 这意味着每个
      1. span

      复制代码
      元素都会始终应用这个基础类，确保基本样式统一。
      
    
    
  • 数组的第二个元素是一个对象：
    
    
    
    • 1. { 'active-power-station-perspective-item-text': isChecked(item.id) }

      复制代码
    • 这个对象的键是
      1. 'active-power-station-perspective-item-text'

      复制代码
      ，值是一个布尔表达式
      1. isChecked(item.id)

      复制代码
      。
      
    • 如果
      1. isChecked(item.id)

      复制代码
      返回
      1. true

      复制代码
      ，则
      1. active-power-station-perspective-item-text

      复制代码
      类会被应用到
      1. span

      复制代码
      元素上；否则，不会应用。
      
    
    
  
  

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

复制代码

2.2源代码

1. <template>
   
2.   <div class="power-station-perspective">
   
3.     <div class="flow-chart-container-item">
   
4.       <div class="power-station-perspective-title flow-chart-container-item-parent">
   
5.         {{ title }}
   
6.       </div>
   
7.       <div v-for="item in buttonGroupsArr"
   
8.           :key="item.id"
   
9.           class="power-station-perspective-item flow-chart-container-item location"
   
10.       >
    
11.         <span
    
12.             class="power-station-perspective-item-text"
    
13.             @click="clickItem(item.id)"
    
14.             :class="[
    
15.             'power-station-perspective-item-text',
    
16.             { 'active-power-station-perspective-item-text': isChecked(item.id) }
    
17.           ]">
    
18.           {{ item.title }}
    
19.         </span>
    
20.       </div>
    
21.     </div>
    
22.   </div>
    
23. </template>
    
24. 
    
25. <script setup>
    
26. import {ref, onMounted} from "vue";
    
27. 
    
28. const title = ref("菜单项");
    
29. const buttonGroupsArr = ref([
    
30.   {title: "按钮1", id: 0},
    
31.   {title: "按钮2", id: 1},
    
32.   {title: "按钮3", id: 2},
    
33.   {title: "按钮4", id: 3},
    
34.   {title: "按钮5", id: 4},
    
35. ]);
    
36. 
    
37. const checkedItem = ref(0);
    
38. 
    
39. const isChecked = (param) => {
    
40.   return checkedItem.value === param;
    
41. };
    
42. 
    
43. const clickItem = (param) => {
    
44.   checkedItem.value = param;
    
45. };
    
46. 
    
47. onMounted(() => {
    
48. 
    
49. });
    
50. </script>
    
51. 
    
52. <style scoped>
    
53. .power-station-perspective{
    
54.   width: 200px;
    
55. }
    
56. .flow-chart-container-item-parent {
    
57.   width: 100%;
    
58.   background: linear-gradient(90deg, rgba(0, 136, 234, 0.84) 0%,rgba(31, 38, 83, 0.85) 101.82%);
    
59. }
    
60. 
    
61. .flow-chart-container-item {
    
62.   display: grid;
    
63.   text-align: center;
    
64.   padding: 3px 5px 3px 3px;
    
65.   margin-bottom: 3px;
    
66.   align-items: center;
    
67. }
    
68. 
    
69. .power-station-perspective-item {
    
70.   background: rgba(0, 46, 79, 0.5);
    
71. }
    
72. 
    
73. .location {
    
74.   cursor: pointer;
    
75. }
    
76. 
    
77. .power-station-perspective-item-text {
    
78.   margin: 0 auto;
    
79.   cursor: pointer;
    
80. }
    
81. .active-power-station-perspective-item-text{
    
82.   color: #cc7e17;
    
83. }
    
84. .power-station-perspective-title {
    
85.   margin-bottom: 3px;
    
86. }
    
87. </style>

复制代码

3.实现效果

到此这篇关于Vue3实现点击按钮实现文字变色功能的文章就介绍到这了,更多相关Vue3点击按钮文字变色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/323536u31.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！