vue之神奇的动态按钮

不念不忘少年蓝@ 2022-01-31 01:51 333阅读 0赞

今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮

![1240][]

首先我们还是要对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>

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

具体的实现效果如下:

![1240 1][]

![1240 2][]

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

![1240 3][]

整体代码如下:

> <!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>

> **希望对你的学习有帮助！！！**
> 
> **“我们相信人人都可以成为一个WEB前端开发大神，现在开始，找个师兄，带你入门，学习的路上不再迷茫。这里是WEB前端开发修真院，初学者转行到互联网行业的聚集地。"**
> 
> **大师兄先送你一套前端入门心法，加qq群 853597293 即可免费领取**

![1240 4][]

[1240]: /images/20220131/f67ea18a0a0543fe8ba961468648ca49.png
[1240 1]: /images/20220131/3da9964d83d24366bca5e29a8939445c.png
[1240 2]: /images/20220131/55b7f6afa29b483bbe743ed83b7aa06d.png
[1240 3]: /images/20220131/1097670d862c4c858e9b8d469fae0f37.png
[1240 4]: /images/20220131/7a23599710ba4b82820b04108147b1a7.png