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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Smile_ping/article/details/79121000

####项目需求:

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

render

这里写图片描述

这里写图片描述

上图是 渲染出来的页面
  • 图一: 每一个小提问,用户根据自身近一年体验进行选择
  • 图二: 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");
        }
    }
}
展开阅读全文

v-model双向绑定

06-21

<p>n <span style="color:#333333;"><span style="font-size:16px;"><strong>【课程介绍】</strong></span></span>n</p>n<p>n <span style="color:#333333;"><span style="font-size:16px;">课程目标:从零基础到学会实战开发vue项目</span><br /><span style="font-size:16px;">适用人群:会基础HTML,CSS,JS</span><br /><span style="font-size:16px;">接口后台:python</span><br /><span style="font-size:16px;">课程特色:提供项目接口,用python开发,提供短信验证码接口,接口和文档永久有效,学生的项目上线后可直接访问,可当做面试作品和大学生毕业设计</span></span><span style="color:#333333;"> </span><span style="font-size:16px;"></span>n</p>n<p>n <span style="font-size:16px;"><br /></span>n</p>n<p>n <span style="font-size:16px;"><strong>【课程收益】</strong></span>n</p>n<p>n <span style="font-size:16px;">1.从零基础掌握vue开发</span>n</p>n<p>n <span style="font-size:16px;">2.掌握vue组件思维<br /></span>n</p>n<p>n <span style="font-size:16px;">3.了解什么是前后端分离开发</span>n</p>n<p>n <span style="font-size:16px;">4.学会请求数据</span>n</p>n<p>n <span style="font-size:16px;">5.学会vue高级功能使用</span>n</p>n<p>n <span style="font-size:16px;">6.做出一个完整的上线项目</span>n</p>n<p>n <span style="font-size:16px;">7.课程可当做大学生毕业设计</span>n</p>n<p>n <span style="font-size:16px;">8.课程可当做面试作品</span>n</p>

没有更多推荐了,返回首页