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 日期时间函数(经典+完善+实用)
May 27 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
JointJS流程图的绘制方法
Dec 03 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
Postman环境变量全局变量使用方法详解
Aug 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中用正则表达式清除字符串的空白
2011/01/17 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
Joomla开启SEF的方法
2016/05/04 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
js实现微信聊天界面
2020/08/09 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
python中kmeans聚类实现代码
2018/02/23 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
python numpy中cumsum的用法详解
2019/10/17 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
python实现斗地主分牌洗牌
2020/06/22 Python
python全栈开发语法总结
2020/11/22 Python
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
拖鞋店创业计划书
2014/01/15 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python