基于vue实现一个神奇的动态按钮效果


Posted in Javascript onMay 15, 2019

今天我们将利用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>

当然也可以选择你喜欢的图片进行放置,这里我们只是放置颜色填充的框

具体的实现效果如下:

基于vue实现一个神奇的动态按钮效果基于vue实现一个神奇的动态按钮效果基于vue实现一个神奇的动态按钮效果 

  通过不同的点击来获得不同的图片!

整体代码如下:

<!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实现一个神奇的动态变色按钮效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
半角全角相互转换的js函数
Oct 16 Javascript
js Html结构转字符串形式显示代码
Nov 15 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
layui添加动态菜单与选项卡
Jul 26 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 #Javascript
详解VSCode配置启动Vue项目
May 14 #Javascript
微信小程序下拉菜单效果的实例代码
May 14 #Javascript
jquery+css实现Tab栏切换的代码实例
May 14 #jQuery
jquery实现二级导航下拉菜单效果实例
May 14 #jQuery
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 #Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 #Javascript
You might like
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
微信公众平台开发之配置与请求
2015/08/26 PHP
Javascript Global对象
2009/08/13 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
2013/12/08 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
Python pass详细介绍及实例代码
2016/11/24 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
银行出纳岗位职责
2013/11/25 职场文书
村长贪污检举信
2014/04/04 职场文书
领导班子四风表现材料
2014/08/23 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
新年晚会开场白
2015/05/29 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技