Vue的單選/多選效果

includes()方法判斷是否包含某一元素,返回true或false表示是否包含元素，對NaN同樣有效

filter()方法用於把Array的某些元素過濾掉，filter()把傳入的函數依次做用於每一個元素，而後根據返回值是true仍是false決定保留仍是丟棄該元素：生成新的數組

1、單選

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:0;}
ul{
    padding:0; 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>

實現效果圖：

 

 

 選中效果圖：

 

 

 

2、多選

CSS樣式以下：

<style type="text/css">
body{margin:0;}
.box{ margin:150px 150px;}
ul{
    padding:0; 
    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