基于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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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
关于尾递归的使用详解
2013/05/02 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
JavaScript使用prototype定义对象类型
2007/02/07 Javascript
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
FLASH 广告之外的链接
2008/12/16 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
jQuery验证插件 Validate详解
2014/11/20 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python 含参构造函数实例详解
2017/05/25 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
Python 实现向word(docx)中输出
2020/02/13 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
伦敦一卡通:The London Pass
2018/11/30 全球购物
电钳专业个人求职信
2014/01/04 职场文书
颐和园英文导游词
2015/01/30 职场文书
沈阳故宫导游词
2015/01/31 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers
聊聊JS ES6中的解构
2021/04/29 Javascript