前言：
在写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>
这样就完美的解决了根据我们选中变换样式的问题，实现我们想要的功能
效果图：
文章来源：https://www.toymoban.com/news/detail-799611.html
#好了，本次教程到这里就结束了，希望大家多多点赞关注支持（首席摸鱼师 微信同号），持续跟踪最新文章吧~文章来源地址https://www.toymoban.com/news/detail-799611.html
到了这里，关于Vue教程：如何使用Div标签实现单选框与多选框按钮以便我们随意调整样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
