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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
layui实现动态和静态分页
Apr 28 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 Javascript
Vue如何基于vue-i18n实现多国语言兼容
Jul 17 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
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
微信小程序开发探究
2016/12/27 Javascript
BootStrap Tooltip插件源码解析
2016/12/27 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
浅谈JavaScript 声明提升
2020/09/14 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
python中range()与xrange()用法分析
2016/09/21 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
车间组长岗位职责
2013/12/20 职场文书
2014乡镇领导班子四风对照检查材料思想汇报
2014/10/05 职场文书
优秀护士事迹材料
2014/12/25 职场文书
学术会议邀请函
2015/01/30 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书