基于vue实现一个神奇的动态按钮效果
今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮
首先我们还是要对vue进行配置,在上篇随笔中有相关下载教学.
然后我们要在html页面上搭建三个简易的按钮,颜色分别为紫,绿和蓝(颜色随意)其代码如下:
<body>
<div id="app">
<p>
<button @click="btn_click('pg1')" :style="{background:'rebeccapurple'}">紫</button>
<button @click="btn_click('pg2')" :style="{background:'yellowgreen'}">绿</button>
<button @click="btn_click('pg3')" :style="{background:'cornflowerblue'}">蓝</button>
</p>
</div>
</body>
这里的@是v-on事件指令,在这里要在三个按钮上设置点击事件
接着我们要进行条件指令的判断,其代码如下:
<div class="box pg1" v-if="pg == 'pg1'" key="pg1"></div> <div class="box pg2" v-else-if="pg == 'pg2'" key="pg2"></div> <div class="box pg3" v-else key="pg3"></div>
通过条件来判断点击不同的按钮触发不同的效果
接下来我们将进行挂载点,事件的渲染以及为事件提供实现体操作
<script>
new Vue({
el: '#app',
data: {
pg: 'pg1'
},
methods: {
btn_click: function (pg_num) {
this.pg = pg_num
}
}
})
</script>
这里我们设置进入页面后默认显示第一个按钮显示的图片,通过点击来完成事件的转换.
最后就是把图片给设置出来啦
<style>
.box {
width: 200px;
height: 100px;
background-color: darkgray;
}
.pg1 { background-color: rebeccapurple; }
.pg2 { background-color: yellowgreen; }
.pg3 { background-color: cornflowerblue; }
</style>
当然也可以选择你喜欢的图片进行放置,这里我们只是放置颜色填充的框
具体的实现效果如下:
通过不同的点击来获得不同的图片!
整体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: darkgray;
}
.pg1 { background-color: rebeccapurple; }
.pg2 { background-color: yellowgreen; }
.pg3 { background-color: cornflowerblue; }
</style>
</head>
<body>
<div id="app">
<p v-if="is_if" key="my_if">v-if的显示与隐藏</p>
<p v-show="is_show" key="my_show">v-show的显示与隐藏</p>
<p>
<button @click="btn_click('pg1')" :style="{background:'rebeccapurple'}">紫</button>
<button @click="btn_click('pg2')" :style="{background:'yellowgreen'}">绿</button>
<button @click="btn_click('pg3')" :style="{background:'cornflowerblue'}">蓝</button>
<div class="box pg1" v-if="pg == 'pg1'" key="pg1"></div>
<div class="box pg2" v-else-if="pg == 'pg2'" key="pg2"></div>
<div class="box pg3" v-else key="pg3"></div>
</p>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
is_if: false,
is_show: true,
pg: 'pg1'
},
methods: {
btn_click: function (pg_num) {
this.pg = pg_num
}
}
})
</script>
</html>
总结
以上所述是小编给大家介绍的基于vue实现一个神奇的动态变色按钮效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关推荐
-
vue.js 实现点击按钮动态添加li的方法
如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="
-
Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue表单绑定(单选按钮,选择框(单选时,多选时)</title> </head> <body> <!-- 单选按钮 --> <div id="app"> <input type="radio" valu
-
vue 点击按钮实现动态挂载子组件的方法
Vue.extend( options ) 参数: {Object} options 用法: 使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象. data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数 示例:子组件 byMount.vue <template> <div> <div>mount content test!!</div> </div> </template&
-
vue实现动态按钮功能
Vue是前台框架,可以独立完成前后端分离式web项目渐进式的javascript框架 ,今天我们来设计一个简单的动态按钮 具体效果图如下: 点击后会变成这样: 首先我们需要下载vue.js: https://vuejs.org/js/vue.min.js 将网页内的内容全选粘贴至js文件中 然后我们先创建一个html文件 在body创建一个按钮具体代码如下: <body> <div id="app"> <button v-on:click="bt
-
Vue.js实现按钮的动态绑定效果及实现代码
实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head> <title>按钮绑定</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
-
基于vue实现一个神奇的动态按钮效果
今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮 首先我们还是要对vue进行配置,在上篇随笔中有相关下载教学. 然后我们要在html页面上搭建三个简易的按钮,颜色分别为紫,绿和蓝(颜色随意)其代码如下: <body> <div id="app"> <p> <button @click="btn_click('pg1')" :style="{background:'rebeccapurple'}&quo
-
基于 Vue 实现一个酷炫的 menu插件
写在前面 最近看到一个非常酷炫的menu插件,一直想把它鼓捣成vue形式,谁让我是vue的死灰粉呢,如果这都不算爱:pensive:.:laughing:开个小玩耍,我们一起来探索黑魔法吧.观看本教程的读者需要具备一定的vue和css3的知识. 本文结构 1.效果演示 2.使用方法介绍 3.关键步骤讲解 正文 1.效果演示 pic_1 pic2 pic_3 在线演示 live demo 2.使用介绍 项目地址:github.com/MingSeng-W/vue-bloom-menu ,clone
-
基于vue实现一个禅道主页拖拽效果
效果图如下所示: 源码地址 bb两句 最近在做一个基于vue的后台管理项目.平时项目进度统计就在上禅道上进行.so~ 然后领导就感觉这个拖拽效果还行,能不能加到咱们项目里面. 既然领导发话,那就开干.. 所有技术:vue + vuedraggable 拖动的实现基于 vuedraggable 的插件开发. 主页为两栏流式布局,每一个组件可以在上下拖动,也可以左右拖动. 基本步骤 布局 这块布局为最为普通的两栏布局,这里采用flex布局.左边自适应,右边为固定宽. .layout-containe
-
Vue写一个简单的倒计时按钮功能
在项目开发里,我们经常会遇到发送验证码.点击了之后有60秒倒计时的按钮,很常见却也很简单,但是在写这个按钮的时候有个别地方还要注意下,今天写出来,如有问题欢迎指正! 完成的效果如下: 为了更快显示出效果,我把时间设成了5秒.按钮在点击之后会出现倒计时,同时按钮变为不可点击状态,样式也发生变化,鼠标悬浮上的样子也会发生变化. 接下来我们用代码来实现: <button class="button" @click="countDown"> {{content}
-
基于vue实现移动端圆形旋钮插件效果
最近公司有一个项目的需要做出旋钮的效果,旋钮有十个档,根据手指旋转切换,旋转时接近最近的档会有吸附效果,具体效果如下: html部分代码: <div class="_touch"> <div class="round_box" ref="box" @touchstart="touchStart" @touchmove="touchMove"> <div v-if="a
-
vue实现一个获取按键展示快捷键效果的Input组件
遇到一个需求,页面内要自定义快捷键,这就需要可以有地方设置和展示快捷键,找了一圈Element UI发现没有能稍微改改就能用的组件,所以自己动手写了一个. 这个只有快捷键展示功能,快捷键实际绑定生效的话是依赖传回的快捷键数据,由另外的组件处理的.目前只测试了Chrome的环境. 效果如下: 关键点 虽然看起来像是一个Input但在组件内实际上是展示一个标签效果,还需要有删除按钮.这就得在输入框内放下html代码,浏览器的Input组件显然不适合,这就只能自己仿一个类Input组件效果了. foc
-
基于vue写一个全局Message组件的实现
不知道大家在用一些UI框架,比如Element-ui的时候,有没有觉得一些全局组件.this.$message(),this.Toast()等,用起来很爽.他们不像其他的组件,需要去导入,去注册.麻烦的很. 看了Element的源码,自己也撸了一个.其中包括了以前没有接触过的插件知识,哎,感觉自己对Vue的理解还是不够,只停留在了使用的这阶段.需要更多的往深层次的地方去钻.不说废话了,直接上代码. 效果演示 全局组件需要一个index.js文件去注册 BlogMessage.vue 这里的scr
-
基于Vue 撸一个指令实现拖拽功能
之前撸了一个copy 指令,这次再撸一个拖拽指令.. 具体是个什么蛇皮玩意儿呢,大概就像介样: emmm..没错,看起来就是如此的鸡肋,但是莫得办法,大佬喜欢啊. 由于我们项目中用的是 element-ui ,所有这个指令只针对 element-ui 的对话框组件哈,如果你们用的别的 ui 库也有这个需求的,涂涂改改应该也能用.. 其实这个拖拽的原理还是很简单的: 1.首先鼠标按下( onmousedown ) 记录目标元素当前的 left 和 top 值 2.鼠标移动( onmousemove
-
基于vue实现swipe轮播组件实例代码
项目背景 图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如Swiper. 但是当项目中的图片轮播只需要一个很简单的轮播样式,比如这样的 我们引用这样一个110k的大插件,就大材小用了.再安利一下,swiper2.x和swiper3.x对移动和PC端支持情况如下图 当当当当~~~ 我们今天的主角登场了,thebird/Swipe,这个插件完成了图片轮播需要的基本功能,只有14.2k,真真的轻量级 啊.还有,还有 翻译一下,就是俺们全支持,不管你是PC端(IE7+)还是移动端浏览器.此