includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效

filter()方法用于把Array的某些元素过滤掉,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素:生成新的数组

一、单选

DOM文档中结构如下:

<ul class="box">
<li v-for="c,index of cities" :class="{checked:index==n}" @click="changeList(index)">{{c}}</li>
</ul>

CSS样式如下:

<style type="text/css">
body{margin:;}
ul{
padding:; list-style:none;
margin:150px 150px;
}
li{
width:80px; height:50px;
display:inline-block;
border-radius:8px; border:1px #000 solid;
text-align:center; line-height:50px;
cursor:pointer;
transition:all 0.3s linear;
margin-left:5px;
}
li:hover{
background-color:#0CF; color:#fff;
border:1px #fff solid;
}
li.checked{
background-color:#0CF; color:#fff;
border:1px #fff solid;
}
</style>

JavaScript样式如下:

<script src="vue.js"></script>
<script>
var app = new Vue({
el : ".box",
data : {
cities : ["上海","北京","广州","重庆","西安"],
n : 0
},
methods :{
changeList(index){
this.n = index;//this指向app
}
}
})
</script>

实现效果图:

选中效果图:

二、多选

CSS样式如下:

<style type="text/css">
body{margin:;}
.box{ margin:150px 150px;}
ul{
padding:;
list-style:none;
}
li{
width:50px; height:30px; display:inline-block;
text-align:center; line-height:30px;
cursor:pointer;margin-left:5px;
}
li:before{
display:inline-block; width:10px; height:10px;
line-height:10px; content:""; border:1px #000 solid;
margin-right:2px; transition:all 0.3s linear;
}
li.checked:before{
background-color:#0CF;
border:1px #fff solid;
}
li.checked{color:#0CF;}
</style>

方法一:

DOM文档中结构如下:

<ul class="box">
<li v-for="c,index of cities" :class="{checked:arr.includes(index)}" @click="checkedBox(index)">{{c}}</li>
</ul>

JavaScript样式如下:

<script src="vue.js"></script>
<script>
var app = new Vue({
el : ".box",
data : {
cities : ["上海","北京","广州","重庆","西安"],
arr : []
},
methods :{
checkedBox(i){
if(this.arr.includes(i)){
//includes()方法判断是否包含某一元素,返回true或false表示是否包含元素,对NaN一样有效
//filter()方法用于把Array的某些元素过滤掉,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素:生成新的数组
this.arr=this.arr.filter(function (ele){return ele != i;});
//this.arr=this.arr.filter((ele)=>ele!=i);
//filter()为假时删除
}else{
this.arr.push(i);
}
}
}
})

方法二:

DOM文档中结构如下:

<ul class="box">
<li v-for="c,index of cities"
:class="{checked:c.bOn}"
@click="checkbox(index)">{{c.city}}</li>
</ul>

JavaScript样式如下:

<script src="vue.js"></script>
<script>
var app = new Vue({
el : ".box",
data : {
cities : [{city:"北京",bOn:false},
{city:"上海",bOn:false},
{city:"重庆",bOn:false},
{city:"广州",bOn:false},
{city:"西安",bOn:false}]
},
methods : {
checkbox(i){
this.cities[i].bOn = !this.cities[i].bOn;
}
}
})

转载来自

本文链接:https://blog.csdn.net/Number7421/article/details/81002729

Vue的单选/多选效果的更多相关文章

  1. vue 实现单选/多选效果

    转:https://blog.csdn.net/Number7421/article/details/81002729 不过我以前都写过这三种方法了,很pang额,怕之后忘记了,偷个懒拿别人的,以免以 ...

  2. vue实现单选多选反选全选全不选

    单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...

  3. vue实现全选效果

    vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...

  4. react 使用antd的多选功能做一个单选与全选效果

    一个小而简单的单选全选功能,其实官网已经给出效果了,不过是我多做了些复合用法 addorupdatemodal.jsx import React from "react"; imp ...

  5. vue实现功能 单选 取消单选 全选 取消全选

    vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...

  6. 微信小程序button选中改样式-实现单选/多选

    小程序实现多button单选/多选 红色为选中状态 单选 多选 ①wxss /* pages/button-select/button-select.wxss */ .button_container ...

  7. angular-ui-select 下拉框支持过滤单选多选解决方案(系列一)

    angular-ui-select  官方文档:github地址:https://github.com/angular-ui/ui-select 请大家多看文档     首先注意版本的问题,如果版本不 ...

  8. 个人永久性免费-Excel催化剂功能第58波-批量生成单选复选框

    插件的最大威力莫过于可以把简单重复的事情批量完全,对日常数据采集或打印报表排版过程中,弄个单选.复选框和用户交互,美观的同时,也能保证到数据采集的准确性,一般来说用原生的方式插入单选.复选框,操作繁琐 ...

  9. Android 可单选多选的任意层级树形控件

    花了几天研究了下鸿扬大神的博客<Android打造任意层级树形控件,考验你的数据结构和设计>,再结合公司项目改造改造,现在做个笔记. 先看看Demo的实现效果.首先看的是多选效果 再看看单 ...

随机推荐

  1. CentOS7使用tar.gz包安装MySql的踩坑之旅

    由于客户的CentOS服务器没有安装yum工具,只能通过下载tar.gz包安装mysql,于是跟着万能的百度开启了漫漫踩坑之旅: 1.下载mysql-5.6.33-linux-glibc2.5-x86 ...

  2. [转帖]油猴脚本管理器 Tampermonkey v4.8 离线CRX安装包(谷歌浏览器版)

    https://www.52pojie.cn/thread-1010604-1-1.html 油猴脚本管理器 Tampermonkey v4.8 离线CRX安装包(谷歌浏览器版) 链接:https:/ ...

  3. 【Mac+Android+uiautomatorviewer】之报错:Unexpected error while obtaining UI hierarchy java.lang.reflect.InvocationTargetException

    安卓8.0以后uiautomatorviewer会报错,解决办法如下: 参考:<android 8.0 以后 uiautomator 无法直接使用的问题> 步骤一: 先执行命令:(注意:想 ...

  4. Prometheus 监控linux服务器

    Prometheus 监控linux服务器 node_exporter:用于*NIX系统监控,使用Go语言编写的收集器. 使用版本 node_exporter 0.17.0 相关文档 使用文档:htt ...

  5. java异常的嵌套和级联

    一.分开捕获或者嵌套使用 我们先看看下面这段代码: public class Cal { public int div(int a, int b) { int result = a / b; retu ...

  6. 树莓派安装使用docker

    2019/11/11, 树莓派4B, Raspbian Buster,Docker 19.03.4 摘要:树莓派Raspbian Buster中安装Docker,Dockerfile更改软件源 安装d ...

  7. SqlServer共用表达式(CTE)With As 处理递归查询

    共用表表达式(CTE)可以看成是一个临时的结果集,可以再SELECT,INSERT,UPDATE,DELETE,MARGE语句中多次引用. 一好处:使用共用表表达式可以让语句更加清晰简练. 1.可以定 ...

  8. vue动态子组件的实现方式

    让多个组件使用同一个挂载点,并动态切换,这就是动态组件. 通过使用保留的 <component>元素,动态地绑定到它的 is 特性,可以实现动态组件. 方式一:局部注册所需组件 <d ...

  9. Fiddler抓本机包

    使用Fiddler抓本机包的方法: File -->Capture Traffic 选中之后自动设置本机的Internet代理选项.

  10. 英语gzibeads天珠gzibeads单词

    天珠英语是gZiBeads,藏语叫(si , 斯)汉语译为“斯”或“瑟”,又称“天降石”.在<藏汉大辞典>里天珠的解释为:“亚玛瑙,猫睛石,一种宝石,俗称九眼珠.入药能治脑溢血”.最早的天 ...