vue 实现类似淘宝星级评分的示例

实例如下所示：

<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 实现类似淘宝星级评分的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • vue实现仿淘宝结账页面实例代码
  • vue-star评星组件开发实例
赞 (0)

相关推荐

  • vue-star评星组件开发实例

    star文件夹下建立Star.vue,及相关的图片信息.便于组件的就近维护 Star.vue: <template> <div class="star" :class="starSize"> <span v-for="(itemClass,key) in itemClasses" :class="itemClass" class="star-item"></span

  • vue实现仿淘宝结账页面实例代码

    vue实现仿淘宝结账页面实例代码

    虽然Vue最强大的是组件化开发,但是其实多页面开发也蛮适合的.下面小编给大家分享vue实现仿淘宝结账页面实例代码,具体内容大家参考下本文. 这个demo,是小编基于之前的 vue2.0在table中实现全选和反选 文章进行更新后的demo,主要功能呢,是仿照淘宝页面的结算购物车商品时自动算出合计价格的页面,具体页面效果请看下面的动图:(如果大家发现有什么问题请及时提出帮小颖改正错误呦,谢谢啦嘻嘻) 效果图: 更新后的home.vue <template> <div class="

  • vue 实现类似淘宝星级评分的示例

    实例如下所示: <template> <div id="shoplist"> <p class="all" > <input type="radio" name="b" value="0" v-model="inputdata"/> <span>★</span> <input type="radio&

  • JavaScript制作淘宝星级评分效果的思路

    JavaScript制作淘宝星级评分效果的思路

    小编也是刚开始学JavaScript,觉得淘宝评星效果很棒,于是产生了自己写一个的想法,先给大家分享一下实现效果: 现附上自己写的源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script language="JavaScript" type="text/javascript">

  • vue实现类似淘宝商品评价页面星级评价及上传多张图片功能

    最近在写一个关于vue的商城项目,然后集成在移动端中,开发需求中有一界面,类似淘宝商城评价界面!实现效果图如下所示: 评价页 点击看大图,且可左右滑动 功能需求分析 1.默认为5颗星,为非常满意,4颗满意,根据不同星级显示不同满意程度. 2.评价内容,最多为200字. 3.上传图片最多上传6张,图片不可拉伸,可删除,可点击放大左右滑动展示 具体实现关键代码 关于星级功能: 写一个五星数组,默认数组中有亮的星级图片,用bool值判断是否变暗.      默认星级数组  点击实现的关键代码: //

  • jquery实现类似淘宝星星评分功能实例

    本文实例讲述了jquery实现类似淘宝星星评分功能的方法,分享给大家供大家参考之用.具体方法如下: html部分代码如下: <body> <div id="div"> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div>

  • jquery实现类似淘宝星星评分功能有截图

    jquery实现类似淘宝星星评分功能有截图

    html <body> <div id="div"> <ul> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </div> <p id="p"></p> <p id="sco

  • jQuery实现类似淘宝网图片放大效果的方法

    本文实例讲述了jQuery实现类似淘宝网图片放大效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>类似淘宝网的图片放大代码</title> <script type="

  • jQuery实现的类似淘宝网站搜索框样式代码分享

    jQuery实现的类似淘宝网站搜索框样式代码分享

    运行效果图:                                                ----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的类似淘宝网站搜索框样式代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

  • vue select二级联动第二级默认选中第一个option值的实例

    当二级联动比如选择国家的时候,希望选中一个国家的时候后面城市默认选中第一个城市,则给国家的select加一个@change事件就可以了 <div class="inputLine"> <span>所在区域</span> <select name="" v-model="countryName" @change="selectCountry"> <option :value=

  • 基于Vue自定义指令实现按钮级权限控制思路详解

    思路: 登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(我会将这个token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户权限,用户名等等信息). 权限验证:通过token获取用户对应的 role,自定义指令,获取路由meta属性里btnPermissions( 注: meta.btnPermissions是存放按钮

随机推荐