Vue radio / multi-selection effect

Includes () method comprising determining whether an element, returns true or false indicating whether the element contains, as effective for NaN

filter () method is used to filter out certain elements Array, filter () function is passed the sequentially applied to each element, based on the returned value is true or false decision to retain or discard the element: generating a new array

First, radio

DOM document is structured as follows:

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

CSS styles are as follows:

<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 style as follows:

<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>

Achieve renderings:

 

 

 Select renderings:

 

 

 

Second, multiple choice

CSS styles are as follows:

<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>

method one:

DOM document is structured as follows:

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

JavaScript style as follows:

<Script the src = "vue.js"> </ Script> 
<Script> var App = new new Vue ({ 
    EL: ".box" , 
    Data: { 
        Cities: [ "Shanghai", "Beijing", "Guangzhou", " Chongqing "," Xi " ], 
        ARR: [] 
    }, 
    methods: { 
        checkedBox (I) { iF ( the this .arr.includes (I)) {
                 // Includes () method of determining whether to include an element, or return true false indicating whether the element contains, as effective for NaN // filter () method is used to filter out certain elements Array, filter () function is passed the sequentially applied to each element, based on the returned value is true or false the decision to retain or discard elements: generating a new array of the this .arr = the this .arr.filter(function (ele){return

            
                
                = ELE! I;});
                 // ! this.arr this.arr.filter = ((ELE) => I = ELE); 
                // filter () is false deleted 
            } the else {
                 the this .arr.push (I ); 
            } 
        } 
    } 
})

Method Two:

DOM document is structured as follows:

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

JavaScript style as follows:

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

 

 

 

 

Reprinted from

This link: https://blog.csdn.net/Number7421/article/details/81002729