VUE实现两个按钮点击跳转各表单并高亮颜色_vue按钮高亮的切换

本文章讲述的是当我们在做登陆界面时会遇到这样的情况，想写两个登陆方式，一种是密码，一种是手机号，我们怎样把这两个登陆方法在我们当前情况下进行切换，并且点击后颜色会绑定到当前点击的按钮上？

第一步

先进行class的绑定，我们在这里绑定一个active，自定义一个变量名为activeToggle，并且为其添加点击事件（别忘了加入转换的参数，像我里面的账号登陆，参数为account），点击哪一个就会跳转到哪一个表单。

第二步

定义一个toggle的方法，在export模块里添加methods方法，写入一个toggle，toggle传入一个当前激活的active变量，这个时候这个变量传入的就是咱们所需要的account或phone，我们设置toggle的值，我们传什么进来，这个toggle就会变成什么。这个时候就是我们点击哪边，哪边就会跳转并高亮颜色，相当于给全局变量一个赋值。

需要注意的一点是方法名和变量名不能重名！！！

第三步

我们把第一份写好的密码表单复制下来，然后生成第二份手机登录表单，在密码登录里面el-form标签处添加v-if方法，v-if指令是会根据表达式值的真假,切换元素的显示和隐藏,其实是在操作dom元素。然后在手机登录里面写上v-else，这样我们就做完了。