基于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 相关文章推荐
JavaScript 比较时间大小的代码
Apr 24 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 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写的serv-u的web申请账号的程序
2006/10/09 PHP
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
Yii框架登录流程分析
2014/12/03 PHP
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
python os.path模块常用方法实例详解
2018/09/16 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
成功的酒店创业计划书
2013/12/27 职场文书
英语专业学生的自我评价
2013/12/30 职场文书
社区母亲节活动记录
2014/03/06 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
作风建设剖析材料
2014/10/06 职场文书
会计稽核岗位职责
2015/04/13 职场文书
运动会报道稿大全
2015/07/23 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL