前言：

在寫Vue項(xiàng)目時(shí)，我們經(jīng)常會(huì)用到單選框以及復(fù)選框，以往我們常用的是Element里面的單選框以及復(fù)選框，但是呢這里面的選框都不容易調(diào)整，假如我們需要不同的樣式以及大小，就很難去實(shí)現(xiàn)想要的結(jié)果，本章教程就為大家講解，如何使用div標(biāo)簽去實(shí)現(xiàn)單選，多選的這樣一個(gè)功能，以便我們可以任意的調(diào)整自己想要的樣式

首先：

第一步，我們先畫一個(gè)草圖

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標(biāo)簽

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中的值，前者字符串與后者數(shù)組

到這里存值得問題就已經(jīng)解決了，接下來就是選中與未選中樣式問題，我們準(zhǔn)備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;
}

	那么我們?nèi)绾瓮ㄟ^動(dòng)態(tài)的改變樣式呢，請看下一步

第三步、采用v-bind屬性綁定方式動(dòng)態(tài)改變

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>

	這樣就完美的解決了根據(jù)我們選中變換樣式的問題，實(shí)現(xiàn)我們想要的功能

效果圖：

#好了，本次教程到這里就結(jié)束了，希望大家多多點(diǎn)贊關(guān)注支持（首席摸魚師 微信同號），持續(xù)跟蹤最新文章吧~文章來源地址http://www.zghlxwxcb.cn/news/detail-799611.html

到了這里，關(guān)于Vue教程：如何使用Div標(biāo)簽實(shí)現(xiàn)單選框與多選框按鈕以便我們隨意調(diào)整樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！