单选，单选，多选框，动态改变样式

 由单选框，多选框，更改为按钮样式，勾选，实现圈红效果，如下

 

 1.html部分

<div  :class="[form.isThisHospitalPatient==0?'el-active':'']"  @click="form.isThisHospitalPatient=0">是</div>
                        <div  :class="[form.isThisHospitalPatient==1?'el-active':'']"   @click="form.isThisHospitalPatient=1">否</div>

 

<span 
                v-for='(item,index) in sendResult' 
                :key='item.key' 
                :class="[item.active?'el-active':'']"
                @click='handleChange(item)'
                >
                  {{item.text}}
              </span>

 sendResult: [
        { key: "1", text: "干燥", active: false },
        { key: "2", text: "渗血", active: false },
        { key: "3", text: "渗液", active: false },
        { key: "4", text: "红肿", active: false },
        { key: "5", text: "脐疝", active: false },
        { key: "6", text: "脐膨出", active: false }
      ],

 方法：渲染，

 handleChange(tpl){
        //   this.sendResult
        console.log(tpl.key)
        let results = []
        this.sendResult.forEach(item => {
            if(item.key == tpl.key) {
                item.active = !item.active
            }
            if(item.active) {
                results.push(item.key)
            }
        })
         console.log(results)
        // this.results
      },

 总结，

如果是单选，通过三目运算，进行添加样式

如果是多选，通过循环判断，进行push到新的数据，添加样式

菜鸟一枚，仅做记录，能帮到别人更好