v-model双向绑定获取单选按钮值《计算评分》

项目需求：

根据选题测评用户体质类别

• 有九类体质，每一类有（7，8）道选择题
• 每一道选择题答案有5个，对应分数（1分，2分，3分，4分，5分）
• 最后一类平和质，比较特殊，带*号题是（5分，4分，3分，2分，1分）
• 每一类的体质选择题要全部选择完成
• 计算每一类体质(每一道)选择题总分，通过对应公式再计算出 转化分数，出判定结果
• 其他8类体质转化分数根据对应条件，判定体质
• 两大类体质： 平和质：为正常体质， 其他8类为：偏颇体质

体质选题通过结合php渲染出来

上图是 渲染出来的页面

• 图一： 每一个小提问，用户根据自身近一年体验进行选择
• 图二： v-model双向绑定体质类别属性，单选按钮答案分数跟value值对应
• 图三： 是渲染出来html

到这里，需要思考一下： 如何获取到用户选择每一题分数？
1. 通过v-model绑定属性来获取分数（双向绑定）
2. 可以给每一道题《设置class类》，获取class,拿到value值

我是通过第一方式获取的（因为直接统计v-model绑定属性分数）图二可以看到

思路

• 封装函数（传入形参）在vue的updated生命钩子中调用方法
  分别是：
  names： 属性值
  length：每类体质有多少道选择题
  currentThis： vue当前this(this指vue实例)

注意点： 平和质方法中 需要再次遍历拿到数组中数据，再进行条件判断,否则出现问题：本人尝试了

如果直接在vue中的for遍历count++后面，判断 '平和质相关条件判断'，当count == 8 时，会调用第九项 平和质函数（这点没错）， 调用函数同时还把 平和质中 判定结果赋值上 否最后一个条件（这显然不符合需求，因为要用户把第九项全部题选择完成后，才根据条件判断）

解决方法： 在 ‘平和质函数中 再次遍历数组取出8项体质数据进行判断’

实现相关代码如下, 不足之处请大家多多指教…

vue中代码（实例化，遍历数组）

 var app = new Vue({
    el: '#app',
    data: data,
    updated:function(){
        // 调用 方法
        showScore("yangxu", 7, this);
        showScore("yinxu", 8, this);
        showScore("qixu", 8, this);
        showScore("tanshi", 8, this);
        showScore("shire", 7, this);
        showScore("xueyu", 7, this);
        showScore("tebin", 7, this);
        showScore("qiyu", 7, this);              

        // 定义变量 目的： 用来计算用户填写完前八项后，再调用执行第九项函数代码
        var count = 0;
        // 遍历 数组
        for (var key in mapArr) {
            count++;   // 递增
            console.log(key + ":" + mapArr[key]);
        }
        // 当 count == 8 ，调用 平和质方法
        if (count == 8 ){
            console.log("调用第9项");
            gentleFun("pinghe", 8 ,this);
        }
         console.log("平和质转化分----->" +gentleChangeScore);
    }
})

/*定义全局数组，目的： 存储前八项体质题目(7,8道题)转化分数*/
mapArr = new Array(); 

前八项 体质类别公共函数封装

/*前八项 体质类别公共函数，最后一项平和质计算条件较为特殊，封装在另一个函数中*/
function showScore(names,length,currentThis) {
 // 定义 计算 和  变量
  var sum = 0;
  var flag = true;   // 定义 节流阀
  var dataArr = [];   // 定义数组 ，用来存储 每种 质选项 分数
 
 //  判断 遍历 每种体质选项 长度
 for(var i = 0;i < length; i++){
     //  添加到数据中
     dataArr.push(currentThis[names+(i+1)])
     //如果长度不相等  return
      if(!currentThis[names+(i+1)]){
          flag = false;
          return false;
      }
  }
  
 //  如果为true 说明有数据
 if(flag){
 //data.yangxu1,data.yangxu2,data.yangxu3,data.yangxu4,data.yangxu5,data.yangxu6,data.yangxu7
    //  遍历数据
     dataArr.forEach(function(item){
         // 累加和
         sum +=parseInt(item);
     })
	    // console.log(sum);
 }

   // 计算转化分 其他8种体质  分别 转化分 , 然后才能判断  平和质条件
   var countChange= jkyMul(((jkySub(sum,length)) / (jkyMul(length, 4))) , 100)
    mapArr[names] = countChange;
    // console.log(mapArr[names] = countChange);

    /**
    *判断 偏颇体质 条件
    * 转化分≧40分	是
    * 转化分30~39分	倾向是
    * 转化分﹤30分  否
    */
     if(countChange >= 40){
         $('#is'+names).val("是");
     }else if(countChange >= 30 && countChange <= 39){
         $('#is'+names).val("倾向是");
     }else if(countChange < 30){
        $('#is'+names).val("否");
     }  
 }

平和质 函数封装

/*平和质 封装函数*/
function gentleFun(name,length,current) {
     var total = 0;   // 定义 计算 和  变量
     var flag = true;   // 定义 节流阀
     var gentleArr = [];   // 定义数据
    //  遍历 当前选项长度
    for(var i = 0;i < length; i++){
       //  添加到数据中
       gentleArr.push(current[name+(i+1)])
       //如果长度不相等  return
        if(!current[name+(i+1)]){
            flag = false;
            return false;
        }
    }
     
    //  如果为true 说明有数据
    if(flag){   //data.pinghe1,data.pinghe2,data.pinghe3,data.pinghe4,data.pinghe5,data.pinghe6,data.pinghe7,data.pinghe8
      //  遍历数据
      gentleArr.forEach(function(item){
           // 累加和
           total +=parseInt(item);
       })
	      //console.log(total);
   }

    //  计算平和质转化分
   var gentleChangeScore = jkyMul(((jkySub(total,length)) / (jkyMul(length, 4))) , 100)
    console.log("平和质  转化分------>");
    console.log(gentleChangeScore);
    
    /**
        *  判断  平和质 条件 
        *平和体质转化分≧60分	是
        *其他8种体质转化分均﹤30分	
        *平和体质转化分≧60分	基本是
        *其他8种体质转化分均﹤40分	
        *不满足上述条件者	否
    */
    for(var key in mapArr){
        if(gentleChangeScore >= 60 && mapArr[key] < 30){
            $("#ispinghe").val("是ph");
        }else if(gentleChangeScore >= 60 && mapArr[key] < 40){
            $("#ispinghe").val("基本是ph");
        }else{
            $("#ispinghe").val("否ph");
        }
    }
}