vue 实现类似淘宝星级评分的示例
2018-03-01 08:57
751 查看
实例如下所示:
<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---实现类似淘宝星级评分
- 纯js实现类似淘宝星级评分功能
- jquery实现类似淘宝星星评分功能有截图
- Vue-router 类似Vuex实现组件化开发的示例
- jQuery实现类似淘宝购物车全选状态示例
- Android控件之RatingBar(类似淘宝实现滑动星级评价效果)
- 类似淘宝评论的星级评分
- jquery实现类似淘宝星星评分功能实例
- vue实现图片滚动的示例代码(类似走马灯效果)
- jQuery实现类似淘宝购物车全选状态示例
- jquery实现类似淘宝星星评分功能有截图
- jquery实现类似淘宝星星评分功能实例
- thinkPHP框架实现类似java过滤器的简单方法示例
- vue+axios+element ui 实现全局loading加载示例
- Vue多种方法实现表头和首列固定的示例代码
- 1000行代码实现MVVM (类似Angular1.x.x , Vue)
- 星级评分效果 -js实现
- jQuery+PHP实现星级评分
- vue组件Prop传递数据的实现示例
- vue.js实现输入框输入值内容实时响应变化示例