So erreichen Sie in Vue eine Taobao-ähnliche Sternebewertung

Jetzt werde ich Ihnen ein Beispiel für die Verwendung von Vue zur Implementierung einer Taobao-Sternebewertung vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Das Beispiel ist wie folgt:

<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:&#39;shoplist&#39;,
data(){
return {
inputdata:&#39;5&#39;
}
},
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>

Das Obige ist das, wofür ich zusammengestellt habe Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Beispiel des Wechsels der Vue-Seite zur Scroll-Seite, um top_vue.js anzuzeigen

Lassen Sie uns darüber reden JS Verwendung der Animationsbibliothek Velocity.js

Detaillierte Erläuterung der Vue-Filterinstanz

Das obige ist der detaillierte Inhalt vonSo erreichen Sie in Vue eine Taobao-ähnliche Sternebewertung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!