基于vue实现一个神奇的动态按钮效果
更新时间：2019年05月15日 08:28:17 作者：777ijBGly-
今天我们将利用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+axios实现统一接口管理的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
本文主要介绍了Vue h函数的使用详解，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要介绍了vue实现多个echarts根据屏幕大小变化而变化实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
本文主要介绍了element中drawer模板的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
分页功能是常见的需求之一，本文主要介绍了Vue前端利用slice()方法实现分页器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
这篇文章主要介绍了为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题,需要的朋友可以参考下2018-04-04
这篇文章主要给大家介绍了关于VUE html5-qrcode实现H5扫一扫功能的相关资料,html5-qrcode是轻量级和跨平台的QR码和条形码扫码的JS库,集成二维码、条形码和其他一些类型的代码扫描功能,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了Vue指令之v-for的使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
这篇文章主要介绍了vue-cli 默认路由再子路由选中下的选中状态问题及解决代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
这篇文章主要介绍了vue中的路由传值与重调本路由改变参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论