基于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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
Apr 01 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
react 应用多入口配置及实践总结
Oct 17 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
使用php来实现网络服务
2009/09/15 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
python encode和decode的妙用
2009/09/02 Python
python实现的文件夹清理程序分享
2014/11/22 Python
简单谈谈python基本数据类型
2018/09/26 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
Python 变量的创建过程详解
2019/09/02 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
广告学专业自荐信范文
2014/02/24 职场文书
授权委托书
2014/09/17 职场文书
大足石刻导游词
2015/02/02 职场文书
北京青年观后感
2015/06/15 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
导游词之井冈山
2019/11/20 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android