如何做高并发网站的架构设计,软文通,微信会员卡管理系统怎么开通,网站3网合一是怎么做的1.动态样式实现
1.1核心代码解释#xff1a; classpower-station-perspective-item-text#xff1a; 为这个 span 元素添加了一个 CSS 类#xff0c;以便对其样式进行定义。 clickclickItem(item.id)#xff1a; 这是一个 Vue 事件绑定。当用户点…1.动态样式实现
1.1核心代码解释 classpower-station-perspective-item-text 为这个 span 元素添加了一个 CSS 类以便对其样式进行定义。 clickclickItem(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 插值语法用于显示每个项目的标题文本。 spanclasspower-station-perspective-item-textclickclickItem(item.id):style{ color: isChecked(item.id) ? #cc7e17 : }{{ item.title }}/span
1.2源代码
templatediv classpower-station-perspectivediv classflow-chart-container-itemdiv classpower-station-perspective-title flow-chart-container-item-parent{{ title }}/divdiv v-foritem in buttonGroupsArr:keyitem.idclasspower-station-perspective-item flow-chart-container-item locationspanclasspower-station-perspective-item-textclickclickItem(item.id):style{ color: isChecked(item.id) ? #cc7e17 : }{{ item.title }}/span/div/div/div
/templatescript 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(() {});
/scriptstyle 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;
}
/style2.动态类名 2.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) }] 2.2源代码
templatediv classpower-station-perspectivediv classflow-chart-container-itemdiv classpower-station-perspective-title flow-chart-container-item-parent{{ title }}/divdiv v-foritem in buttonGroupsArr:keyitem.idclasspower-station-perspective-item flow-chart-container-item locationspanclasspower-station-perspective-item-textclickclickItem(item.id):class[power-station-perspective-item-text,{ active-power-station-perspective-item-text: isChecked(item.id) }]{{ item.title }}/span/div/div/div
/templatescript 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(() {});
/scriptstyle 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;
}
.active-power-station-perspective-item-text{color: #cc7e17;
}
.power-station-perspective-title {margin-bottom: 3px;
}
/style3.实现效果
