基于vue实现神奇的动态按钮效果

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

首先，我们还需要配置vue。在最后一篇文章中，有相关的下载教学。

然后我们将在html页面上构建三个简单的按钮，颜色为紫色、绿色和蓝色(颜色是随机的)，代码如下：

body div id=' app ' p button @ click=' BTN _ click(' pg1 ')' : style=' { background : ' Rebecca紫色' } '紫色/button button @ click=' BTN _ click(' pg2 '): style=' { background : '黄绿色' } '绿色/button button @ click=' BTN _ click(' pg3 ')' : style=' { background : '玉米花蓝' } '蓝色/button /p/div

然后我们要判断条件指令，它的代码如下：

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

接下来，我们将挂载点，呈现事件，并为事件提供实现者

编写new vue({ El : ' # app }，data: {pg3360' pg1'}，methods: {BTN _ click3360函数(pg _ num) {this。pg=pg _ num } })/脚本这里我们设置为进入页面后默认显示第一个按钮

最后，画面设置好了

风格。box { width: 200px高度： 100像素；背景-颜色：深灰色；} . pg1 { background-color : rebecazure；} . pg2 { background-color : yellow green；} .pg3 { background-color:矢车菊蓝；}/风格当然也可以选择自己喜欢的图片进行放置。这里我们只是放置一个彩色填充的盒子

具体实施效果如下：

通过不同的点击获取不同的图片！

总代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style。box { width: 200px高度： 100像素；背景-颜色：深灰色；} . pg1 { background-color : rebecazure；} . pg2 { background-color : yellow green；} .pg3 { background-color:矢车菊蓝；}/style/head dydiv id=' app ' p v-if=' is _ if ' key=' my _ if ' v-if display and hide/p p v-show=' is _ show ' key=' my _ show ' v-show display and hide/p pbutton @ click=' BTT : style=' { background : ' Rebecca紫色' } '紫色/button @ click=' BTN _ click(' pg2 ')' : style=' { background 3: '黄色button button @ click=' BTN _ click '(' pg3 ')' : style=' { background : '玉米花蓝' } ' blue/button div class=' box pg1 ' v-if=' pg=' pg1 ' key=' pg1 '/div class=' box pg2 ' v-else-if=' pg=' pg2 '/div class=' box pg3 ' v-else key=' pg3 '/div/p/div/body Script src='

以上是边肖介绍的基于vue的神奇动态变色按键效果，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！