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)
什么是组件式开发: 组件式开发就是将单个组件组合起来,形成一个大的组件进行页面的开发完成 什么是复合型组件: 复合型组件就是将相同的功能写成一个公用的组件(单元组件),供其他组件使用,就类似于后台开发 ...
随机推荐
- mybatis中使用Integer类型的参数<if>判断问题
mybatis对传入参数进行判断时,会使用if标签, 一般是判断不为null和'', 如下: <if test="name != null and 那么 != ''"> ...
- Angular路由与多视图综合案例
Ajax请求存在的几个问题 (1)Ajax请求不会留下History 记录,会导致浏览器后退按钮失效 (2)用户无法直接通过URL进入应用中的指定页面(保存书签.链接分享给朋友) (3)Ajax对SE ...
- .net core 2.1 Razor 超快速入门
以下过程如有不明白的,可参考:https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/razor-pages/?view=aspnetcore-2 ...
- ogg BR – BOUNDED RECOVERY
BR – BOUNDED RECOVERY 适用于 Extract 进程(仅适用于 Oracle数据库) 使用 BR 参数可以控制 GoldenGate 的 Bounded Recovery (BR) ...
- javascript之传输加密
为什么要使用javascript加密呢?服务端加密远远不够,客户端或者浏览器端也需要加密,以此保证传输信息过程的安全. 今天就我工作中说说这么几种加密算法及其对应的应用场景,如下所示: base64 ...
- 二:vlan,gre,vxlan
管理网络:包含api网络(public给外部用,admin给管理员用-是内部ip,internal给内部用-是内部ip) 数据网络 存储网络 IDRAC网络 PXE网络 控制节点相关服务 system ...
- 使用ssh登录kali
SSH为Secure Shell的缩写,SSH为建立在应用层基础上的安全协议.SSH是目前较可靠,专为远程登录会话和其他网络服务提供安全性的协议.利用SSH协议可以有效防止远程管理过程中的信息泄露问题 ...
- A2D JS框架 - loadScript实现
其实这个功能比较小,本着自己造轮子的优良传统....就自己造一个好了 <head> <title></title> <script src="A2D ...
- 热泪盈眶的五十岁 | James Altucher
我是一名程序员,但我不爱看技术博客,因为要吸取知识点,看源代码.官方文档和书永远比看技术博客要好.对于博客这种偏碎片的媒介,我倾向于看一些短小精炼.有一点深度的叙述,Altucher刚好符我目前的品味 ...
- 官宣 ! 52abp_Pro版本低调上线
上线了 官宣!官宣!官宣! 重要的事情说三次. 是的,你没有看错 https://www.52abp.com/ 的官方企业模板:52abp-pro已经正式上线. 至此52abp.com的官方网站就算告 ...