在vue中如何实现类似淘宝星级评分

来源：动视网责编：小OO 时间：2020-11-27 19:41:37

在vue中如何实现类似淘宝星级评分

实例如下所示。，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)。上面是我整理给大家的，希望今后会对有帮助。相关文章。vue页面切换到滚动页面显示顶部的实例_vue.js。聊聊JS动画库 Velocity.js的使用。vue 过滤器filter实例详解。

推荐度：

点击下载本文 文档为doc格式

导读实例如下所示。，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)。上面是我整理给大家的，希望今后会对有帮助。相关文章。vue页面切换到滚动页面显示顶部的实例_vue.js。聊聊JS动画库 Velocity.js的使用。vue 过滤器filter实例详解。

下面我就为大家分享一篇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页面切换到滚动页面显示顶部的实例_vue.js

聊聊JS动画库 Velocity.js的使用

vue 过滤器filter实例详解