最近在联系router中的history，顺便熟悉一下element ui，

针对动态修改属性的值，做一下笔记。

想要点击更换button的type类型。

最初的想法是使用ref获取该dom：

<el-button ref="button11" size="mini" @click="choose_card1">a</el-button>
<el-button ref="button12" size="mini" @click="choose_card2">b</el-button>
<el-button ref="button13" size="mini" @click="choose_card3">c</el-button>

然后给type赋值：

     this.$refs.button11.type = 'primary'
     this.$refs.button12.type = ''
     this.$refs.button13.type = ''

但是这种办法麻烦不说还报错：

Avoid mutating a prop directly since the value will be overwritten whenever the parent 

component re-renders. Instead, use a data or computed property based on the prop's value.

说是重新渲染的时候父组件的type属性会重写type值

于是想到三元运算符绑定在type上，让他自己计算：

<el-button round :type="button==='button1'?'primary' :''"
                         @click="goLogin('button1')"
                         class="btn-box">CMBI 登录</el-button>
              <el-button round :type="button==='button2'?'primary' :''"
                         @click="goLogin('button2')"
                         class="btn-box">CPBI 登录</el-button>
              <el-button round :type="button==='button3'?'primary' :''"
                        
                         @click="goLogin('button3')">DataX 登录</el-button>




    goLogin(val){

       this.button=val;
    }

就可以切换了