前端必学!vue实现打星评分
vue实现打星评分功能
//首先引用vue.js
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
然后设置vue
<script>let vm = new Vue({el: '#app',data() {return {score1:2,score:2,count:10}},})
</script>
开始设置星星显示
<div id="app">//通过v-for的循环,显示出了10个星星 PS(我用的是iconfont,大家使用前记得要link引入)<i v-for="order in count" class="iconfont iconxingxing1" aria-hidden="true"></i>
</div>
这个时候只是循环出了指定个数count的星星
//修改i标签 @mouseenter当鼠标触碰是,将score1更改为鼠标当前所在的order
//再更改class,添加一个绑定class,进行判断,order小于等于score1的时候,显示iconshoucang1的图标,否则反之
//这样,触碰时更改score1,触碰到底几颗星,从左开始第一颗到鼠标触碰的那一刻变成红色的星
<i v-for="order in count" class="iconfont" @mouseenter="score1=order":class="order<=score1?'iconshoucang1':'iconxingxing1'" ></i>
但是这时有问题,鼠标只是触碰到,但是并没有点击,星星就变了,所以得加以下代码
//@mouseleave 鼠标离开时score1的值改为score,这时就体现了score的作用,在只是触碰没点击时,星星变成之前的数量
<i v-for="order in count" class="iconfont" @mouseenter="score1=order":class="order<=score1?'iconshoucang1':'iconxingxing1'" @mouseleave="score1 = score"></i>
再加一个点击事件,就完成了
//@click点击后score的值变为order
<i v-for="order in count" class="iconfont" @mouseenter="score1=order":class="order<=score1?'iconshoucang1':'iconxingxing1'" @mouseleave="score1 = score" @click="score=order"></i>
前端必学!vue实现打星评分相关推荐
- 前端必学 - 大文件上传如何实现
前端必学 - 大文件上传如何实现 写在前面 问题分析 开始操作 一.文件如何切片 二.得到原文件的hash值 三.文件上传 四.文件合并 技术点总结[重要] 一.上传文件? 二.显示进度 三.暂停上传 ...
- web前端必学功法之一:用户选择爱好
web前端必学功法之一:用户选择爱好 案例实现效果: 首先做这个页面效果,我们要把页面布局给写好,每个网站做好页面可以解决很大的问题. css代码,这里的页面采用Grid布局 <style> ...
- web前端必学功法之一:表单校验(1)
web前端必学功法之一:表单校验 案例效果: 这里的布局采用的是bootstrap布局 <div class="container" style="margin-t ...
- web前端必学功法之一:留言板
web前端必学功法之一:留言板 案例效果: css部分 <style>.container{width: 600px;}.mes-board{margin: 25px 0;padding: ...
- web前端必学功法之一:轮播图
web前端必学功法之一:轮播图 效果演示: <style>* {margin: 0;padding: 0;}/* 去除a标签的下划线 */a {text-decoration: none; ...
- web前端必学功法之一:省市联动
web前端必学功法之一:省市联动 案例:js实现下面功能 **<!-- 省市联动思路分析:1.准备元素:定义省份与城市的下拉框2.绑定事件:绑定省份下拉框的change事件3.准备数据:准备数组 ...
- web前端必学功法之一:秒表实现
web前端必学功法之一:秒表实现 功能案例: css样式:<style>.date{width: 200px;height: 50px;background-color: black;bo ...
- web前端必学功法之一:五星好评
web前端必学功法之一:五星好评 案例效果: <!--思路分析:1.设置鼠标样式,当鼠标放到星星上时,修改鼠标的样式2.定义元素:通过表格的td元素来存放星星3.绑定事件:绑定每一个星星的鼠标悬 ...
- web前端必学功法之一:表单校验(2)
web前端必学功法之一:表单校验(2) 这里采用另一种写法,jQuery写法,在用jQuery写法之前,一定要引入jquery.js. <div class="container&qu ...
最新文章
- PLSQL连Oracle数据库Could not load ……\bin\oci.dll
- pcie ep 应该支持哪种interrupt_双盘位NAS支持PCI扩展可以做什么?QNAP QM2-2S10G1T应用场景讨论...
- 作者:李海生(1974-),男,博士,食品安全大数据技术北京市重点实验室、北京工商大学计算机与信息工程学院教授、研究生导师...
- php获取url返回的json,【求助】本地页面如何取某个URL返回的json
- github开源库(三)
- nginx配置二级域名
- 100 以内的数的研究
- python globals()
- c语言编程贪吃蛇的不同功能,贪吃蛇C语言代码实现(难度可选)
- java 英语简历模板下载 百度云_java软件工程师英文简历模板下载
- 丰桥自助打印顺丰面单
- lol连接服务器失败怎么修复,英雄联盟lol连接服务器失败怎么办?解决方法大全...
- EXCEL用今天日期减去之前的日期得到结果
- 全国省市县名称以及区号邮编大全
- 汽车各档爬坡度曲线matlab,基于MATLAB App Designer的汽车爬坡能力建模与仿真
- org.springframework.dao.InvalidDataAccessApiUsageException: ERR wrong number of arguments for ‘srem‘
- 【笔记1-1】基于对话的问答系统CoQA (Conversational Question Answering)
- 二维码解码程序的两大难点问题
- MySQL教程二 基础查询与排序
- 高精度加法【c++实现】