Vue：选中商品规格改变字体和边框颜色（默认选中第一种规格）

一时失言乱红尘 2021-10-24 01:26 514阅读 0赞

效果图：

![1683377-20190809113330297-1504397379.png][]

CSS：

<div class="label">
        <p>标签类别</p>
        <ul>
            <li v-for="(item, idx) in list1" :key="idx" :class="{
         specColor:changeColor1 === idx}" @click="changeSpec(1,idx)">
            <button class="but1">{
        {item.label}}</button>
            </li>
        </ul>
    </div>
    <div class="label">
        <p>标签类别</p>
        <ul>
            <li v-for="(item, idx) in list1" :key="idx" :class="{
         specColor:changeColor2 === idx}" @click="changeSpec(0,idx)">
            <button class="but1">{
        {item.label}}</button>
            </li>
        </ul>
    </div>

JS：

<script>
      export default {
        
        name: 'detailsOfGoods',
        data () {
          return {
            changeColor1: 0,
            changeColor2: 0,
          }
        },
        methods: {
          /*
          * 选中商品规格
          */
          changeSpec (i, idx) {
            if (i) {
              this.changeColor1 = idx
            } else {
        
              this.changeColor2 = idx
            }
          }
        }
      }
    </script>

样式：

<style scoped lang="less">
        .specColor .but1{
        
            color: #e94d3e;
            border: solid 1px #e94d3e;
          }
    </style>

转载于:https://www.cnblogs.com/Awen71815iou/p/11326300.html

[1683377-20190809113330297-1504397379.png]: /images/20211023/89fbabde3d824dcc8eac012ba5540dfa.png

发表评论取消回复

表情：

评论列表（有 0 条评论，514人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android BottomNavigationView 设置选中颜色和默认颜色的两种实现方法

默认样式： ![2a3afe97e6694f54956d7df82938db83.png][] 修改效果（我这里只将默认的深紫色改成了蓝色）： ![4da65a53fd2

╰半夏微凉°/ 2023年10月08日 22:07/ 0 赞/ 20 阅读

相关小程序的商品规格选择

小程序radio-group实现选择多层级商品规格效果：（当用户没有选择完所有规格，则提示用户选择其他规格。当用户选择完所有规格，则更新当前规格信息） ![在这里插

拼搏现实的明天。/ 2023年06月19日 02:00/ 0 赞/ 148 阅读

相关去除input边框以及选中时边框默认样式

去除input边框以及选中时边框默认样式 <input type="text" > input {

曾经终败给现在/ 2023年02月22日 05:21/ 0 赞/ 46 阅读

相关 Qt：改变Item的选中时的边框

void RectItem::paint(QPainter painter, const QStyleOptionGraphicsItem option, QWidg

爱被打了一巴掌/ 2023年01月12日 11:44/ 0 赞/ 393 阅读

相关 vue 实现商品多规格的sku

template <div class="wrap wrap-sku"> <div class="product-box"> <d

╰半夏微凉°/ 2022年12月16日 13:16/ 0 赞/ 434 阅读

相关 JS_js添加规格，js加jq添加商品规格

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

深藏阁楼爱情的钟/ 2022年12月06日 01:07/ 0 赞/ 201 阅读

相关 input框改变选中后的颜色

以input="type"为例： 1、默认属性，input\{样式\} 2、鼠标悬浮：input:hover\{样式\} 3、点击属性：input:focus\{样

本是古典何须时尚/ 2022年11月15日 03:51/ 0 赞/ 887 阅读

相关 android 下改变默认的checkbox的选中和被选中图片

[android 下改变默认的checkbox的选中和被选中图片][android _checkbox_ _ _] 1. 先导入 che

╰半橙微兮°/ 2022年08月08日 05:11/ 0 赞/ 308 阅读

相关改变网页文本选中的默认背景颜色

> 改变网页文本选中的默认背景颜色，可以更好的突出你的主题色调，使你的网站更有个性与美观。效果图 -------------------- 默认 ![

红太狼/ 2022年07月24日 04:12/ 0 赞/ 288 阅读

相关 Vue：选中商品规格改变字体和边框颜色（默认选中第一种规格）

效果图： ![1683377-20190809113330297-1504397379.png][] CSS： <div class="label">

一时失言乱红尘/ 2021年10月24日 01:26/ 0 赞/ 515 阅读