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 tab效果的实现代码
Dec 26 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
Nov 07 Javascript
Bootstrap媒体对象学习使用
Mar 07 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
JS排序之选择排序详解
Apr 08 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
Mar 14 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
vue和H5 draggable实现拖拽并替换效果
Jul 29 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查询网站的PR值
2013/10/30 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
js取得url地址参数实例
2013/02/22 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
Python fileinput模块使用实例
2015/06/03 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
详解python和matlab的优势与区别
2019/06/28 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
python 修改本地网络配置的方法
2019/08/14 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
Django中使用Celery的方法步骤
2020/12/07 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
《陈毅探母》教学反思
2014/05/01 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python