vue多选/单选效果

转：https://blog.csdn.net/Number7421/article/details/81002729

不过我以前都写过这三种方法了，很pang额，怕之后忘记了，偷个懒拿别人的，以免以后忘记了

一、单选：

思路：当点击的索引值 == v-for循环的索引值时，给你那个li添加选中样式

html：

    
{{c}}

CSS样式如下：

js：

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

image.png

二、多选

方法一和方法二的主要的区别在于数据中有没已有标注是选中状态还是未选中状态

CSS样式如下：

方法一：

思路：新增一个新的空数组arr（arr的里元素的索引值表示，表示该索引值对应的li已经处于被选中状态），如果arr数组没有点击的索引值，就添加到arr数组里，如果有就把这个索引，就把这个索引从数组中删除。

html：

{{c}}

js:

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;});
            }else{
                this.arr.push(i);
            }
        }
    }
})

方法二：

思路：这个就更加通俗易懂了，把点击的那个是否选中的标志取反就可以了

html：

    
{{c.city}}

js:

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;
        }
    }
})

image.png

---

项目实战代码

image.png

image.png

在搜索页面点击拿到数据，点完成，要把数据带到上一个页面。