下面我就為大家分享一篇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中如何實現類似淘寶星級評分的詳細內容。更多資訊請關注PHP中文網其他相關文章!