DropdownMenu 下拉菜单 及 三目运算

<van-dropdown-menu active-color="#285FBD" close-on-click-outside>
    <van-dropdown-item :title="sortName" ref="itemZ">
          <div class="list_fors">
            <div
              :class="
                acticeIndex == index
                  ? 'listSort_title_active'
                  : 'listSort_title'
              "
              v-for="(item, index) in listSort"
              :key="index"
              @click="clickItem(item, '2')"
            >
              {{ item.title }}
              <img
                v-if="acticeIndex == index"
                src="../../assets/qiBar/groupp.svg"
              />
            </div>
          </div>
     </van-dropdown-item>
</van-dropdown-menu>

Vant官网：https://youzan.github.io/vant/#/zh-CN/dropdown-menu

data() {
    return {
    acticeIndex: 0, // 默认下标
    listSort: [
            { index: 0, title: "默认" },
            { index: 1, title: "距离" },
            { index: 2, title: "评价" },
            { index: 3, title: "资质" },
        ],
    sortName: "智能排序", // 默认名称
    }
},
methods:{
  clickItem(item, index) {
        if (index == "2") {
            this.sortName = item.title; // 动态显示下拉框标题名称
            if (item.title == "默认") {
              this.sortName = "智能排序";
        }
            this.acticeIndex = item.index;
            this.$refs.itemZ.toggle(); // 对应上面代码 点击选项后 隐藏菜单(使用ref)
        }
      }
    }  
}

<style>
    .listSort_title {
      width: 30%;
      height: 36px;
      margin: 6px;
      text-align: center;
      line-height: 36px;
      background: #f5f5f5;
      color: #333333;
      font-family: PingFangSC-Regular;
      font-size: 15px;
      cursor: pointer;
    }
    .listSort_title_active {
      width: 30%;
      height: 36px;
      margin: 6px;
      line-height: 36px;
      font-family: PingFangSC-Regular;
      background: #8da6cf;
      border-radius: 8px;
      font-size: 15px;
      color: #285fbd;
      text-align: center;
      cursor: pointer;
      background: url("../../assets/qiBar/groupp.svg") no-repeat; // 背景图片
      background-position: right bottom; // 背景图片位置
      background-size: 25px 25px; // 背景图片宽高
    }
</style>

效果：

标签：index,title,36px,item,background,三目,DropdownMenu,font,下拉菜单
来源： https://www.cnblogs.com/yjd-05/p/14943184.html