Vue是前台框架，可以独立完成前端分离web项目的渐进式javascript框架。今天我们将设计一个简单的动态按钮

具体渲染如下：

点击后会变成这样：

首先，我们需要下载https://vuejs.org/js/vue.min.js

将网页中的所有内容粘贴到js文件中

然后我们首先创建一个html文件

在正文中创建一个按钮。具体代码如下：

Body div id=' app '按钮v-: click=' BTN click ' v-bind : class=' my _ cls ' { msg } }/button/div/body v-on这里是事件绑定方法，事件用：事件名进行标记

语法：v-:事件名称='事件变量'

事件变量：由vue实例的方法提供

当按钮被创建时，我们需要在主体下通过脚本添加vue，并设置点击事件：

具体代码如下：

script src=' http : js/vue . min . js '/script script new vue({ El : ' # app }，data: {msg:' button '，my_cls:'btn'}，Methods : { BTN click : function(){ if(this。my _ cls==' BTN '){这个。my _ cls=' botton'} else {this。my _ cls=' BTN'}}})/scriptmethods为要单击的事件提供了实现者

最后，我们在头部设置样式样式：

风格。btn { width: 100px高度： 40px；背景：橙色；} .botton { width: 200px高度： 80px；背景色：黄绿色；}/样式摘要

上面提到的是边肖给大家介绍的vue实现了动态按钮功能，很不错，有一定的参考价值，需要朋友们的参考价值。