首頁 > web前端 > js教程 > 主體

在vue中如何實現類似淘寶星級評分

亚连
發布: 2018-06-02 14:42:40
原創
2943 人瀏覽過

下面我就為大家分享一篇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:&#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>
登入後複製

上面是我整理給大家的,希望未來會對大家有幫助。

相關文章:

vue頁面切換到捲動頁面顯示頂部的實例_vue.js

聊聊JS動畫庫Velocity.js的使用

vue 過濾器filter實例詳解

以上是在vue中如何實現類似淘寶星級評分的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板