87,993
社区成员
发帖
与我相关
我的任务
分享如何用vue处理数组数据计算权重
依然是vue初学者，依然在做一个投票结果网页，遇到困难需要帮助。。。
现在定义了一个vue
这里用order代表所投的票数 然后需要计算每个问题下每个选项投票结果的权重(例如计算得烤肉对应是50%)放到数组中（每个问题生成一个数组)然后用这个权重来控制计数条的长度
现在定义了一个vue
var vue = new Vue({
el: "#votingResult",
data: {
loading: false,
theme: "出去玩",
resultList: [
{
Id: "",
Name: "吃什么",
Type: "多选",
Result: [
{
Value: "烤肉",
Order:"15",
},
{
Value: "火锅",
Order: "10",
},
{
Value: "日料",
Order: "5",
},
],
},
{
Id: "",
Name: "看什么",
Type: "单选",
Result: [
{
Value: "大陆",
Order: "5",
},
{
Value: "欧美",
Order: "7",
},
{
Value: "日韩",
Order: "7",
},
],
},
{
Id: "",
Name: "玩什么",
Type: "文本",
Value: ["PS4", "NS", "手机"],
}
]
},
methods: {
},
})
这里用order代表所投的票数 然后需要计算每个问题下每个选项投票结果的权重(例如计算得烤肉对应是50%)放到数组中（每个问题生成一个数组)然后用这个权重来控制计数条的长度
...全文
请发表友善的回复…
发表回复
baidu_41881110 2018-12-06
- 打赏
- 举报
我写到自己的页面上会报arr is not defined的错，methods的weight方法里的arr
天际的海浪 2018-12-06
- 打赏
- 举报
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>投票</title>
<style>
input[type="checkbox"], input[type="radio"] {
display: none;
}
input[type="checkbox"] + span ,input[type="radio"] + span {
display: inline-block;
width: 18px;
height: 18px;
vertical-align: middle;
margin-left:1rem;
border-radius: 50%;
border: 2px ;
background-color: rgb(239, 239, 244);
}
input[type="checkbox"]:checked + span ,input[type="radio"]:checked+span{
display: inline-block;
position: relative;
width: 18px;
height: 18px;
border-radius: 50%;
background-color:dodgerblue;
}
input[type="checkbox"]:checked + span:before,input[type="checkbox"]:checked + span:after,input[type="radio"]:checked+span:before,input[type="radio"]:checked+span:after{
content: '';
pointer-events: none;
position: absolute;
color: white;
border: 1px solid;
background-color: white;
}
input[type="checkbox"]:checked + span:before,input[type="radio"]:checked+span:before{
width: 1px;
height: 1px;
left: 25%;
top: 50%;
transform: skew(0deg,50deg);
}
input[type="checkbox"]:checked + span:after,input[type="radio"]:checked+span:after{
width: 3px;
height: 1px;
left: 45%;
top: 42%;
transform: skew(0deg,-50deg);
}
.theme{
font-size:24px
}
.type{
font-size:12px;
background-color:#999;
}
.name{font-size:18px}
.bl {
display: inline-block;
width: 300px;
height: 10px;
border: 1px solid #999;
}
.bl div {
height: 10px;
background-color: #f60;
}
</style>
</head>
<body>
<div id="votingResult">
<div class="theme">{{theme}}</div>
<div class="question" v-for="(list,ind) in resultList">
<div class="type">本问题的投票类型为{{list.Type}}</div>
<div class="name">
{{list.Name}}
</div>
<div class="votingitem" v-if="list.Type=='文本'">
<textarea :name="'test'+ind" rows="5" cols="50"></textarea>
</div>
<div class="votingitem" v-else>
<div class="item" v-for="item in list.Result">
<label><input :type="list.Type=='多选'?'checkbox':'radio'" :name="'test'+ind" :value="item.Value" /><span></span>{{item.Value}}</label>
<div class="bl"><div :style="{width: weight(list.Result,item)}"></div></div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script type="text/javascript">
var vue = new Vue({
el: "#votingResult",
data: {
loading: false,
theme: "出去玩",
resultList: [
{
Id: "",
Name: "吃什么",
Type: "多选",
Result: [
{
Value: "烤肉",
Order:"15",
},
{
Value: "火锅",
Order: "10",
},
{
Value: "日料",
Order: "5",
},
],
},
{
Id: "",
Name: "看什么",
Type: "单选",
Result: [
{
Value: "大陆",
Order: "5",
},
{
Value: "欧美",
Order: "7",
},
{
Value: "日韩",
Order: "7",
},
],
},
{
Id: "",
Name: "玩什么",
Type: "文本",
Value: ["PS4", "NS", "手机"],
}
]
},
methods: {
weight: function (arr,n) {
var sun = arr.reduceRight(function(pv, v, i){
return pv + parseFloat(v.Order);
},0);
return n.Order/sun*100+"%";
}
}
})
</script>
baidu_41881110 2018-12-06
- 打赏
- 举报
能不能麻烦大佬再给一个控制计数条长度的方法。。
baidu_41881110 2018-12-05
- 打赏
- 举报
这能计算权重 那怎么按不同的投票问题生成不同的数组呢
天际的海浪 2018-12-05
- 打赏
- 举报
不用生成数组，在设置计数条长度的地方调用weight()方法就可以了
天际的海浪 2018-12-04
- 打赏
- 举报
写个methods方法啊
methods: {
weight: function (arr,n) {
var sun = arr.reduceRight(function(pv, v, i){
return pv + parseFloat(v.Order);
},0);
return n.Order/sun*100+"%";
}
},
天际的海浪 2018-12-04
- 打赏
- 举报
写个methods方法啊
arr是Result,n是Result中的元素，如：
weight(Result,Result[0])
methods: {
weight: function (arr,n) {
var sun = arr.reduceRight(function(pv, v, i){
return pv + parseFloat(v.Order);
},0);
return n.Order/sun*100+"%";
}
},
arr是Result,n是Result中的元素，如：
weight(Result,Result[0])
