EveryLike/pages/CSS/border/dynamic-border.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view style="margin: 15px;border-radius: 10px;background-color: white;">
      <view v-for="index in [0,1,2,3,4,5,6,7,8,9]" :key="index"
        :class="(index < 9 ? 'bb1' : '') + ' ' + (currentIndex == 0 ? 'btlr10 btrr10' : currentIndex == 9 ? 'bblr10 bbrr10' : '')"
        style="flex-direction: row;align-items: center;padding: 15px"
        :style="index == currentIndex ? 'background-color :#57BE6A;' : ''" @tap="changeIndex(index)">
        <view>
          <text style="font-size: 14px;" :style="index == currentIndex ? 'color: #FFFFFF;' : ''">{{ index }}</text>
        </view>
      </view>


    </view>
    <view style="margin: 15px;margin-top: 20px;">
      <text>动态切换 border 为空值</text>
      <text @click="setBorderBlank" class="common" :style="style">
        {{isSelect?'选中':'未选中'}}
      </text>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<script>
  const defaultStyle = 'border:2px solid black;background :#57BE6A;'
  export default {

    data() {
      return {
        currentIndex: 0,
        style: '' as string,
      }
    },
    computed: {
      isSelect() : boolean {
        return this.style == defaultStyle
      }
    },
    methods: {
      changeIndex(index : number) {
        this.currentIndex = index
      },
      setBorderBlank() {
        this.style = this.style == '' ? defaultStyle : ''
      }
    }
  }
</script>

<style>
  .common {
    padding: 15px;
    border-radius: 4px;
    width: 120px;
    text-align: center;
    margin-top: 10px;
  }

  .bb1 {
    border-bottom: 1rpx solid #EEEEEE;
  }

  .btlr10 {
    border-top-left-radius: 10rpx;
  }

  .btrr10 {
    border-top-right-radius: 10rpx;
  }

  .bblr10 {
    border-bottom-left-radius: 10rpx;
  }

  .bbrr10 {
    border-bottom-right-radius: 10rpx;
  }
</style>