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应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
Jquery进度条插件 Progress Bar小问题解决
Jul 12 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 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的面向对象编程
2006/10/09 PHP
php win下Socket方式发邮件类
2009/08/21 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
Javascript与PHP验证用户输入URL地址是否正确
2014/10/09 PHP
php中动态调用函数的方法
2015/03/16 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
动态加载iframe
2006/06/16 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
2015/08/14 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
Django查询优化及ajax编码格式原理解析
2020/03/25 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
酒店管理专业毕业生推荐信
2013/11/10 职场文书
入党自我鉴定
2014/03/25 职场文书
质量保证书范本
2014/04/29 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
在项目中使用redis做缓存的一些思路
2021/09/14 Redis