Maison > Article > interface Web > 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:'shoplist', data(){ return { inputdata:'5' } }, 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!