vue组件star开发基于vue-cli
<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的更多相关文章
- vue组件从开发到发布
组件化是前端开发非常重要的一部分,从业务中解耦出来,可以提高项目的代码复用率.更重要的是我们还可以打包发布,俗话说集体的力量是伟大的,正因为有许许多多的开源贡献者,才有了现在的世界. 不想造轮子的工程 ...
- 二、vue组件化开发(轻松入门vue)
轻松入门vue系列 Vue组件化开发 五.组件化开发 1. 组件注册 组件命名规范 组件注册注意事项 全局组件注册 局部组件注册 2. Vue调试工具下载 3. 组件间数据交互 父组件向子组件传值 p ...
- vue组件定义方式,vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- 发布自己第一个npm 组件包(基于Vue的文字跑马灯组件)
一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...
- python 全栈开发,Day90(Vue组件,前端开发工具包)
昨日内容回顾 1. Vue使用 1. 生成Vue实例和DOM中元素绑定 2. app.$el --> 取出该vue实例绑定的DOM标签 3. app.$data --> 取出该vue实例绑 ...
- vue组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
- Vue组件化开发
Vue的组件化 组件化是Vue的精髓,Vue就是由一个一个的组件构成的.Vue的组件化设计到的内容又非常多,当在面试时,被问到:谈一下你对Vue组件化的理解.这时候又有可能无从下手,因此在这里阐释一下 ...
- Vue项目中使用基于Vue.js的移动组件库cube-ui
cube-ui 是滴滴公司的技术团队基于 Vue.js 实现的精致移动端组件库.很赞,基本场景是够用了,感谢开源!感谢默默奉献的你们. 刚爬完坑,就来总结啦!!希望对需要的朋友有小小的帮助. (一)创 ...
- 组件式开发(Vue)
什么是组件式开发: 组件式开发就是将单个组件组合起来,形成一个大的组件进行页面的开发完成 什么是复合型组件: 复合型组件就是将相同的功能写成一个公用的组件(单元组件),供其他组件使用,就类似于后台开发 ...
随机推荐
- Angular之模态弹窗ui-bootstrap-modal及轻量级弹窗ngDialog
ui-bootstrap 中模态 官网 angular-ui-bootstrap 对于ui-bootstrap集成大量指令如折叠ui.bootstrap.accordion.时间插件ui.boot ...
- ORM版学员管理系统2
学生信息管理 展示学生信息 URL部分 url(r'^student_list/', app01_views.student_list, name="student_list"), ...
- 【English】20190307
appropriate for 适用[əˈpropriɪt fɔr] appropriate for many business applications:
- Teradata数据库访问链条
- 上传--spring-boot
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-f ...
- 更高的压缩比,更好的性能–使用ORC文件格式优化Hive
http://lxw1234.com/archives/2016/04/630.htm 关键字:orc.index.hive Hive从0.11版本开始提供了ORC的文件格式,ORC文件不仅仅是一种列 ...
- gRPC奇怪的编译命令protoc
举个栗子: protoc -I helloworld/ helloworld/helloworld.proto --go_out=plugins=grpc:helloworld 大神说得没错,读文档就 ...
- ES5-ES6-ES7_async函数
async 函数概述 async/await应该是目前最简单的异步方案,ES7 中新增了 async/await 两个关键词. async 可以声明一个异步函数,此函数需要返回一个 Promise 对 ...
- WPF设计の画刷(Brush)
一.什么是画刷 画刷是是一种渲染方式,用于填充图形形状,如矩形.椭圆.扇形.多边形和封闭路径.在GDI+中,画刷分为以下几种:SolidBrush,TextureBrush,HatchBrush,Li ...
- SpringMVC handleMapping映射过程
初始化IOC容器 Spring初始化的时候会优先初始化自定义的类,下面这个就是 org.springframework.web.servlet.mvc.method.annotation.Reques ...