vue 实现类似淘宝星级评分的示例


Posted in Javascript onMarch 01, 2018

实例如下所示:

<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 实现类似淘宝星级评分的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
自写的一个jQuery圆角插件
Oct 26 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
JS 日期与时间戮相互转化的简单实例
Jun 22 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
vue-star评星组件开发实例
Mar 01 #Javascript
浅谈Angular 的变化检测的方法
Mar 01 #Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 #Javascript
Node.js静态服务器的实现方法
Feb 28 #Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 #Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 #Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 #Javascript
You might like
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
Javascript实现找不同色块的游戏
2017/07/17 Javascript
Angular中支持SCSS的方法
2017/11/18 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
简单了解python的内存管理机制
2019/07/08 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Python基于wordcloud及jieba实现中国地图词云图
2020/06/09 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
纯CSS实现设置半个字符的样式
2014/07/03 HTML / CSS
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
机械电子工程毕业生自荐信
2013/11/23 职场文书
简历中自我评价怎么写
2014/02/12 职场文书
保险公司年会主持词
2014/03/22 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
Python中的变量与常量
2021/11/11 Python
HTML中的表单元素介绍
2022/02/28 HTML / CSS
设置IIS Express并发数
2022/07/07 Servers