Vue教程：如何使用Div标签实现单选框与多选框按钮以便我们随意调整样式

前言：

在写Vue项目时，我们经常会用到单选框以及复选框，以往我们常用的是Element里面的单选框以及复选框，但是呢这里面的选框都不容易调整，假如我们需要不同的样式以及大小，就很难去实现想要的结果，本章教程就为大家讲解，如何使用div标签去实现单选，多选的这样一个功能，以便我们可以任意的调整自己想要的样式

首先：

第一步，我们先画一个草图

vue:

<div class="product_button"><span>单选1</span></div>
<div class="product_button"><span>单选2</span></div>

<div class="product_no_button"><span>多选1</span></div>
<div class="product_no_button"><span>多选2</span></div>

css:

.product_button {
  width: 150px;
  height: 70px;
  margin-right: 15px;
  margin-bottom: 15px;
  padding-top: 20px;
  border: 1px solid lightgray;
  background-color: transparent;
  color: gray;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 5px;
  user-select: none;
}
.product_no_button {
  width: 150px;
  height: 40px;
  margin-right: 15px;
  margin-bottom: 15px;
  padding-top: 5px;
  border: 1px solid lightgray;
  background-color: transparent;
  color: gray;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 5px;
  user-select: none;
}

效果图：

第二步，我们需要将单选与多选按钮单击事件存上值，使用事件绑定v-on标签

vue:

<div class="product_button" @click="productSelect('单选1')"><span>单选1</span></div>
<div class="product_button" @click="productSelect('单选2')"><span>单选2</span></div>

<div class="product_no_button" @click="productNoSelect('多选1')"><span>多选1</span></div>
<div class="product_no_button" @click="productNoSelect('多选2')"><span>多选2</span></div>

js:

productSelect(val) {
  if (this.productRadio == val) {
    this.productRadio = "";
  } else {
    this.productRadio = val;
  }
  console.info(this.productRadio);
},
productNoSelect(val) {
  if (this.productNoSelects.indexOf(val) != -1) {
    this.productNoSelects.splice(this.productNoSelects.indexOf(val), 1);
  } else {
    this.productNoSelects.push(val);
  }
  console.info(this.productNoSelects);
},

	this.productRadio与this.productNoSelects为data中的值，前者字符串与后者数组

到这里存值得问题就已经解决了，接下来就是选中与未选中样式问题，我们准备4种样式：
css:

.product_button {
  width: 150px;
  height: 70px;
  margin-right: 15px;
  margin-bottom: 15px;
  padding-top: 20px;
  border: 1px solid lightgray;
  background-color: transparent;
  color: gray;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 5px;
  user-select: none;
}
.select_product_button {
  width: 150px;
  height: 70px;
  margin-right: 15px;
  margin-bottom: 15px;
  padding-top: 20px;
  border: 1px solid deepskyblue;
  background-color: lightgray;
  color: gray;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 5px;
  user-select: none;
}
.product_no_button {
  width: 150px;
  height: 40px;
  margin-right: 15px;
  margin-bottom: 15px;
  padding-top: 5px;
  border: 1px solid lightgray;
  background-color: transparent;
  color: gray;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 5px;
  user-select: none;
}
.select_product_no_button {
  width: 150px;
  height: 40px;
  margin-right: 15px;
  margin-bottom: 15px;
  padding-top: 5px;
  border: 1px solid deepskyblue;
  background-color: lightgray;
  color: gray;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-radius: 5px;
  user-select: none;
}

	那么我们如何通过动态的改变样式呢，请看下一步

第三步、采用v-bind属性绑定方式动态改变

vue:

<div :class="productRadio == '单选1' ? 'select_product_button' : 'product_button'" @click="productSelect('单选1')"><span>单选1</span></div>
<div :class="productRadio == '单选2' ? 'select_product_button' : 'product_button'" @click="productSelect('单选2')"><span>单选2</span></div>
<div :class="productRadio == '单选3' ? 'select_product_button' : 'product_button'" @click="productSelect('单选3')"><span>单选3</span></div>

<div :class="productNoSelects.indexOf('多选1') != -1 ? 'select_product_no_button' : 'product_no_button'" @click="productNoSelect('多选1')"><span>多选1</span></div>
<div :class="productNoSelects.indexOf('多选2') != -1 ? 'select_product_no_button' : 'product_no_button'" @click="productNoSelect('多选2')"><span>多选2</span></div>
<div :class="productNoSelects.indexOf('多选3') != -1 ? 'select_product_no_button' : 'product_no_button'" @click="productNoSelect('多选3')"><span>多选3</span></div>

	这样就完美的解决了根据我们选中变换样式的问题，实现我们想要的功能

效果图：

#好了，本次教程到这里就结束了，希望大家多多点赞关注支持（首席摸鱼师 微信同号），持续跟踪最新文章吧~