vue制作一个简单的评分效果,这里的星星我是采用两种图片来实现
 
简单的思路就是判断当前点击的星星的下标是否小于等于一个变量,该变量有下标-1获得。
 

vue实现简单评分效果的更多相关文章

  1. Vue动态实现评分效果

    1.图片分为三种 on:half:  off <style> .star{ font-size: 0; } .star-item{ display: inline-block; backg ...

  2. vue实现全选效果

    vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...

  3. ~Vue实现简单答题功能,主要包含单选框和复选框

    内容 实现简单答题效果 环境 Vue,webpack(自行安装) 实现方式 页面将答题列表传递给调用组件,组件将结果返回给调用页面(其它模式也ok,这只是例子) ------------------- ...

  4. vue实现穿梭框效果

    vue实现穿梭框效果 一.总结 一句话总结: 用两个数组分别记录左右框框里面的值,用两个数组绑定checkbox,用来记录选中的checkbox值,根据选中的checkbox的值实现删除增加即可 1. ...

  5. VUE实现简单的全选/全不选

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. vue超简单加载字体方法,解决scss难加载字体的问题

    vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后 ...

  7. Vue过渡和动画效果展示(案例、GIF动图演示、附源码)

    前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...

  8. Query 一些简单的效果

    Query 一些简单的效果 $(selector).hide(speed,callback); 隐藏 $(selector).show(speed,callback); 显示 $(selector). ...

  9. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

随机推荐

  1. mysql中一张(居民)表按年龄段查询数据

    知识点: 用mysql,按年龄段查询一张居民的数据(各年龄段居民的个数) 1.如:查询resident(居民表),按照各年龄段,统计人数 2.mysql语句如下: select ageproporti ...

  2. LeetCode——Find Largest Value in Each Tree Row

    Question You need to find the largest value in each row of a binary tree. Example: Input: 1 / \ 3 2 ...

  3. Kruskal算法初步

    2017-09-18 21:53:00 writer:pprp 代码如下: /* @theme: kruskal @writer:pprp @date:2017/8/19 @begin:21:19 @ ...

  4. 这样获取celery的结果 有啥隐患没有啊?

  5. 分页式存储管理方式AND请求分页式存储管理

    先说下什么是页(页面):就是将用户的程序的的地址空间分成固定大小的区域,称为”页“,或者”页面“ 之后将这些页离散的放进内存中,这样解决了内存的碎片问题 记得老师上课说了下这两个概念不能混,现在区分下 ...

  6. vue-cli router的使用

    用了很久这个vue-cli到现在连入门都算不了,为了防止忘记还是很有必要记一下随笔的. 关于vue-cli中的router的使用,, 我将所有页面都存放在components文件夹下, 灰后通过rou ...

  7. NumPy教程目录

    NumPy Ndarray对象 NumPy数组属性 NumPy数据类型 NumPy数组创建例程 NumPy来自现有数据的数组 NumPy来自数值范围的数组 NumPy切片和索引 NumPy - 高级索 ...

  8. angular2 自定义双向绑定属性

    import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core'; @Component({ selecto ...

  9. es6 nodejs compose

    const compose = (...fns) => { let len = fns.length; let fn_index = len - 1; let fn_result; functi ...

  10. 013——数组(十三) array_push array_rand array_reverse

    <?php /* 数组 array_push array_rand array_reverse */ //array_push()在数组的末端,增加一个或多个元素,入栈 /*$array = a ...