英德天气预报,音乐模块,大宋王朝赵匡胤电视剧
实例如下所示:
<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>
以上这篇vue 实现类似淘宝星级评分的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论