Comment obtenir un classement par étoiles de type Taobao dans vue

Je vais maintenant partager avec vous un exemple d'utilisation de Vue pour implémenter un classement par étoiles Taobao. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

L'exemple est le suivant :

<template>
<p 
id="shoplist">
<p 
class="all" 
>
<input
type="radio"
name="b" 
value="0" v-model="inputdata"/>
<span>★</span>
<input
type="radio"
name="b" 
value="1" v-model="inputdata" />
<span>★</span>
<input
type="radio"
name="b" 
value="2" v-model="inputdata" />
<span>★</span>
<input
type="radio"
name="b" 
value="3" v-model="inputdata" />
<span>★</span>
<input
type="radio"
name="b" 
value="4" v-model="inputdata" />
<span>★</span>
<input
type="radio"
name="b" 
value="5" v-model="inputdata" />
<span>★</span>
</p>
</p>
</template>
<script>
export default {
name:&#39;shoplist&#39;,
data(){
return {
inputdata:&#39;5&#39;
}
},
methods:{
},
watch: {
inputdata(value) {
console.log(value)
}
}
}
</script>
<style>
.all>input{opacity:0;position:absolute;width:2em;height:2em;margin:0;}
.all>input:nth-of-type(1),
.all>span:nth-of-type(1){display:none;}
.all>span{font-size:2em;color:gold;
-webkit-transition:color
.2s;
transition:color
.2s;
}
.all>input:checked~span{color:#666;}
.all>input:checked+span{color:gold;}
</style>

Ce qui précède est ce que j'ai compilé pour tout le monde Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Instance de basculement de la page vue vers la page de défilement pour afficher le top_vue.js

Parlons de JS Utilisation de la bibliothèque d'animation Velocity.js

Explication détaillée de l'instance de filtre vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!