在vue中如何实现类似淘宝星级评分
程序员文章站
2022-03-28 09:12:18
...
下面我就为大家分享一篇vue 实现类似淘宝星级评分的示例,具有很好的参考价值,希望对大家有所帮助。
实例如下所示:
<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>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上就是在vue中如何实现类似淘宝星级评分的详细内容,更多请关注其它相关文章!