vue 多选按钮点击选中改变样式再次点击取消选中

最新推荐文章于 2024-08-20 12:05:27 发布

原创最新推荐文章于 2024-08-20 12:05:27 发布 · 2.2k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #uni-app

Vue 同时被 2 个专栏收录

59 篇文章

订阅专栏

uniapp

3 篇文章

订阅专栏

本文展示了如何使用Vue.js实现一个多选房源属性的功能。代码中包含了一个视图组件，该组件遍历typeList数组并显示房源类型，如住宅、公寓等。点击每个选项会切换其选中状态，通过sel()方法更新selarr数组，记录选中的值。样式定义了选中项的背景颜色和字体颜色。这是一个关于前端开发中Vue.js组件交互和数据管理的例子。

话不多说先看图

代码：

      <view class="">
        <view class="oneTit"> 房源属性(多选) </view>
        <view class="listingsSty fangy">
          <view
            class="firsty"
            v-bind:class="item.ischeck == true ? 'active' : ''"
            v-for="(item, index) in typeList"
            v-bind:key="index"
            @click="sel(index, item)"
          >
            {{ item.name }}
          </view>
        </view>
      </view>

data 数据：

selarr: [1],//默认选中第一个
typeList: [
        {
          val: 1,
          ischeck: true,
          name: "住宅",
        },
        {
          val: 2,
          ischeck: false,
          name: "公寓",
        },
        {
          val: 3,
          ischeck: false,
          name: "商铺",
        },
        {
          val: 4,
          ischeck: false,
          name: "别墅",
        },
        {
          val: 5,
          ischeck: false,
          name: "写字楼",
        },
      ],

methods中：

    sel(index, item) {
      if (item.ischeck == false) {
        item.ischeck = true;
        this.selarr.push(item.val);
      } else {
        item.ischeck = false;
        this.selarr.splice(this.selarr.indexOf(index + 1), 1);
      }
      console.log(this.selarr);
    },

style:

.firsty {
	width: 180rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	color: #333;
	font-size: 28rpx;
	border-radius: 8px;
	border: 1px solid #EEEEEE;
	margin-bottom: 20rpx;
}

.active {
	background-color: #61B1F3;
	color: #fff;
}