<template>
<div class="stars">
<div v-for="(item,ind) in num" :key="ind"
:class="{'on':ind<=cur}"
@mouseover='enter(ind)'
@mouseleave="out()"
@click="ok(ind)"></div>
</div>
</template>
<script>
export default{
name:'Star',
data(){
return{
num:5,
cur:-1,
flag:false
}
},
methods:{
enter(ind){
if(!this.flag){
this.cur=ind;
}
},
out(){
if(!this.flag){
this.cur=-1;
}
},
ok(ind){
this.flag=true;
this.cur=ind;
}
}
}
</script>
<style scoped>
.stars div{
width: 56px;
height: 59px;
background: url('../../static/img/off.png') no-repeat;
float: left;
}
.stars .on{
width: 56px;
height: 59px;
background: url('../../static/img/on.png') no-repeat;
}
</style>

vue组件star开发基于vue-cli的更多相关文章

  1. vue组件从开发到发布

    组件化是前端开发非常重要的一部分,从业务中解耦出来,可以提高项目的代码复用率.更重要的是我们还可以打包发布,俗话说集体的力量是伟大的,正因为有许许多多的开源贡献者,才有了现在的世界. 不想造轮子的工程 ...

  2. 二、vue组件化开发(轻松入门vue)

    轻松入门vue系列 Vue组件化开发 五.组件化开发 1. 组件注册 组件命名规范 组件注册注意事项 全局组件注册 局部组件注册 2. Vue调试工具下载 3. 组件间数据交互 父组件向子组件传值 p ...

  3. vue组件定义方式,vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  4. 发布自己第一个npm 组件包(基于Vue的文字跑马灯组件)

    一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...

  5. python 全栈开发,Day90(Vue组件,前端开发工具包)

    昨日内容回顾 1. Vue使用 1. 生成Vue实例和DOM中元素绑定 2. app.$el --> 取出该vue实例绑定的DOM标签 3. app.$data --> 取出该vue实例绑 ...

  6. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

  7. Vue组件化开发

    Vue的组件化 组件化是Vue的精髓,Vue就是由一个一个的组件构成的.Vue的组件化设计到的内容又非常多,当在面试时,被问到:谈一下你对Vue组件化的理解.这时候又有可能无从下手,因此在这里阐释一下 ...

  8. Vue项目中使用基于Vue.js的移动组件库cube-ui

    cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...

  9. 组件式开发(Vue)

    什么是组件式开发: 组件式开发就是将单个组件组合起来,形成一个大的组件进行页面的开发完成 什么是复合型组件: 复合型组件就是将相同的功能写成一个公用的组件(单元组件),供其他组件使用,就类似于后台开发 ...

随机推荐

  1. 设计模式のNullObjectPattern(空对象模式)----行为模式

    一.产生背景 在空对象模式(Null Object Pattern)中,一个空对象取代 NULL 对象实例的检查.Null 对象不是检查空值,而是反应一个不做任何动作的关系.这样的 Null 对象也可 ...

  2. C#多线程编程のTask(任务全面解析)

    Task是.NET4.0加入的,跟线程池ThreadPool的功能类似,用Task开启新任务时,会从线程池中调用线程,而Thread每次实例化都会创建一个新的线程. 我们可以说Task是一种基于任务的 ...

  3. Jenkins+Ansible+Gitlab自动化部署三剑客-Jenkins本地搭建

    后面需要shell基础,目前没有,等有了,再更

  4. 16.ajax_case04

    # 抓取金色财经快讯接口 # https://www.jinse.com/lives import requests import json header = { 'Accept': 'text/ht ...

  5. Spark排序与去重遇见的问题

    答案: Spark的distinct是通过聚集去重的,可以简单理解为group by去重: 代码1:是先去重之后再排序取limit20是正确的, 代码2:是先排序之后再到各个节点进行去重之后再limi ...

  6. icon图标库记录

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 阿里巴巴: http://iconfont.cn/ 可以下载图标 github : x ...

  7. pytorch例子学习——NEURAL TRANSFER USING PYTORCH神经迁移

    参考:https://pytorch.org/tutorials/advanced/neural_style_tutorial.html 具体的理论就不解释了,这里主要是解释代码: ⚠️使用的是pyt ...

  8. Pycharm+Python3+python工程打包成exe+在windows下自动定时运行

    python3打包成exe---pyinstaller方法:https://www.cnblogs.com/mufenglin/p/7479281.html 按照如上方式打包后,执行dist文件夹(新 ...

  9. MySQL 数据库规范--调优篇(终结篇)

    前言 这篇是MySQL 数据库规范的最后一篇--调优篇,旨在提供我们发现系统性能变弱.MySQL系统参数调优,SQL脚本出现问题的精准定位与调优方法. 目录 1.MySQL 调优金字塔理论 2.MyS ...

  10. jar包读取外部文件

    public static void main(String[] args) { String path1 = System.getProperty("user.home");// ...