vue 商品星级评价

最新推荐文章于 2024-04-14 09:46:43 发布

web行路人

最新推荐文章于 2024-04-14 09:46:43 发布

阅读量582

点赞数

分类专栏： vue css3

vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

css3

12 篇文章

订阅专栏

本文介绍了一个使用Vue实现的商品星级评价组件。通过一系列隐藏的单选按钮和星星图标，用户可以直观地选择商品的评分等级，并实时显示所选等级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 商品星级评价

template>
    <div 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>
    </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>