Maison  >  Article  >  interface Web  >  Comment obtenir un classement par étoiles de type Taobao dans vue

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

亚连
亚连original
2018-06-02 14:42:402939parcourir

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn