上面是每组选项集对应各自的分数,总分是将这些选中的选项集进行累加,计算出总分 。
<tr style="letter-spacing: 1px;">
<td style="width: 10%;text-align: center;">
<el-checkbox v-model="formRadio.nck9" @change="(val) => {
JSZF1(val, 0);
}
">0分</el-checkbox>
</td>
<td>营养状况正常</td>
<td style="width: 10%;text-align: center;">
<el-checkbox v-model="formRadio.nck13" @change="(val) => {
JSZF2(val, 0);
}
">0分</el-checkbox>
</td>
<td>营养需求正常</td>
</tr>
<tr style="letter-spacing: 1px;">
<td style="width: 10%;text-align: center;">
<el-checkbox v-model="formRadio.nck10" @change="(val) => {
JSZF1(val, 1);
}
">1分</el-checkbox>
<br>轻度
</td>
<td>3个月内体中丢失>5%或前一周饮食是正常需求的50-70%</td>
<td style="width: 10%;text-align: center;">
<el-checkbox v-model="formRadio.nck14" @change="(val) => {
JSZF2(val, 1);
}
">1分</el-checkbox>
<br>轻度
</td>
<td>慢性疾病急性加重、慢性疾病有急性并发症、有肝硬化、骨折、慢性阻塞性肺疾病、血液透析患者、肿瘤、糖尿病、肝硬化</td>
</tr>
<tr style="letter-spacing: 1px;">
<td style="width: 10%;text-align: center;">
<el-checkbox v-model="formRadio.nck11" @change="(val) => {
JSZF1(val, 2);
}
">2分</el-checkbox>
<br>中度
</td>
<td>2个月内体中丢失>5% 或BMI18.5-20.5 同时一般状况差或前一周饮食是正常需求的25-60%</td>
<td style="width: 10%;text-align: center;">
<el-checkbox v-model="formRadio.nck15" @change="(val) => {
JSZF2(val, 2);
}
">2分</el-checkbox>
<br>中度
</td>
<td>比较大的腹部手术、中风、严重肺炎、恶性血液肿瘤</td>
</tr>
<tr style="letter-spacing: 1px;">
<td style="width: 10%;text-align: center;">
<el-checkbox v-model="formRadio.nck12" @change="(val) => {
JSZF1(val, 3);
}
">3分</el-checkbox>
<br>重度
</td>
<td>1个月内体中丢失>5% 或BMI <18.5 同时一般状况差或前一周饮食是正常需求的0-25% 或血清白蛋白<30g/L(无肝肾功能明显异常)</td>
<td style="width: 10%;text-align: center;">
<el-checkbox v-model="formRadio.nck16" @change="(val) => {
JSZF2(val, 3);
}
">3分</el-checkbox>
<br>重度
</td>
<td>脑损伤、骨髓移植、ICU 病人APACHE >10</td>
</tr>
<tr>
<td colspan="4">
<el-checkbox v-model="formRadio.nck17" @change="(val) => {
JSZF3(val, 1);
}
">年龄≥70 岁</el-checkbox>
  则加1分
</td>
</tr>
<tr>
<td colspan="4">营养风险总分(
<!-- {{ formInput.input3 + formInput.input4 + formInput.input5 }} -->
<input class="medicalHistoryBlur" type="text" style="width: 2vw"
v-model="formInput.input6" />
)=营养受损分数
<input class="medicalHistoryBlur" type="text" style="width: 2vw"
v-model="formInput.input3" />
+疾病分数
<input class="medicalHistoryBlur" type="text" style="width: 2vw"
v-model="formInput.input4" />
+年龄分数
<input class="medicalHistoryBlur" type="text" style="width: 2vw"
v-model="formInput.input5" />
</td>
</tr>
以上是HTML的代码,当复选框的状态 发生改变就会调用该自方法;
data() {
return {
formRadio: {},
formInput: {
input3: '',
input4: '',
input5: '',
input6: '',
},
total1: 0,
total2: 0,
total3: 0,
};
},
methods: {
JSZF1(val, num) {
if (val) {
this.total1 = this.total1 + num;
} else {
this.total1 = this.total1 - num;
}
this.formInput.input3 = this.total1;
var zf = Number(this.formInput.input3) + Number(this.formInput.input4) +
Number(this.formInput.input5)
this.$set(this.formInput, "input6", zf)
},
JSZF2(val, num) {
if (val) {
this.total2 = this.total2 + num;
} else {
this.total2 = this.total2 - num;
}
this.formInput.input4 = this.total2;
var zf = Number(this.formInput.input3) + Number(this.formInput.input4) +
Number(this.formInput.input5)
this.$set(this.formInput, "input6", zf)
},
JSZF3(val, num) {
if (val) {
this.total3 = this.total3 + num;
this.formInput.input5 = this.total3;
} else {
this.total3 = this.total3 - num;
if (this.total3 == 0) this.formInput.input5 = '';
}
var zf = Number(this.formInput.input3) + Number(this.formInput.input4) +
Number(this.formInput.input5)
this.$set(this.formInput, "input6", zf)
},
clear() {
this.total1 = 0;
this.total2 = 0;
this.total3 = 0;
},
},
当然(JSZF)这个方法也可以使用一个就OK,各自的选项集可以给个不同的type也是可以的。上篇是使用jQuery的语法,这次使用的是v-model进行双向绑定,理解上也更容易;
(clear)这个方法是页面中有其他功能,比如说回显到该页面要进行修改选定项,要调用这个方法,相当于是赋初始值的意思,修改时勾选会重新进行累加,但是,input6,也就是最后的总分发现没有渲染出结果,这是出了什么问题?
这是因为 this.$set()是绑定在vue的.prototype原型上,vue是使用Object.defineProperty给对象做了一层拦截,当触发get时进行依赖收集,当触发set时触发依赖导致渲染函数执行重新渲染。第一次触发get是在首次加载页面渲染的时候触发,就会递归的将对象的属性都依赖收集。
**但是 Object.defineProperty()有个问题 他是只会监听初始化的数据 如果中途给数组或者对象添加新属性的时候 Object.defineProperty() 就不会监听到 ,不会监听到就没有数据劫持 ,没有数据劫持就没有双向绑定, 没有双向绑定就没有数据变视图变**
如果我们就是想在程序运行的时候 给vue的data中对象或者数组添加新属性 并且让试图改变怎么办?
**$set() 就是在程序运行的时候给对象或者数组添加新属性并且让试图改变**
this.$set( target , key , value)
target: 要更改的数据源(可以是一个对象或者数组)
key 要更改的具体数据 (索引)
value 重新赋的值
所以:在vue中,当你需要修改某个对象的属性,并且需要确保这个属性是双向绑定的,那么就需要使用this.$set()方法,进行强制视图更新。