下面小编就为大家分享一篇vue 实现类似淘宝星级评分的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
实例如下所示：
<template> <div> <p > <input type="radio" value="0" v-model="inputdata"/> <span>★</span> <input type="radio" value="1" v-model="inputdata" /> <span>★</span> <input type="radio" value="2" v-model="inputdata" /> <span>★</span> <input type="radio" value="3" v-model="inputdata" /> <span>★</span> <input type="radio" value="4" v-model="inputdata" /> <span>★</span> <input type="radio" value="5" v-model="inputdata" /> <span>★</span> </p> </div> </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>
以上这篇vue 实现类似淘宝星级评分的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: