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 相关文章推荐
js模拟类继承小例子
Jul 17 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
Jan 08 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
Javascript Worker子线程代码实例
Feb 20 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
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
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
PHP学习 变量使用总结
2011/03/24 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
php页面缓存方法小结
2015/01/10 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
超级强大的表单验证
2006/06/26 Javascript
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
$.ajax json数据传递方法
2008/11/19 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
2016/04/18 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
js实现登录验证码
2016/12/22 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
2019/02/17 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
python计算书页码的统计数字问题实例
2014/09/26 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python读取xlsx的方法
2018/12/25 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
django创建css文件夹的具体方法
2020/07/31 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
入党申请书自我鉴定
2013/10/12 职场文书
大学生毕业自我评价范文分享
2013/11/07 职场文书
运动会广播稿100字
2014/01/11 职场文书
大学生安全教育主题班会
2015/08/12 职场文书