<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/vue.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<script>
window.onload = function(){
Vue.component('contents',{
template:'#content',
props:['userdata'],
data(){
return{
UserData:this.userdata,
}
},
computed:{
abr(){
var sum = 0;
for(i=0;i<this.UserData.length;i++){
sum += this.UserData[i].proportion
}
if(sum == 0){
sum=1
}
return sum
}
}
})
new Vue({
el:'#app',
data:{
userdata:[
{name:'小明',proportion:0},
{name:'小白',proportion:0},
{name:'小若',proportion:0},
{name:'小黑',proportion:0}
]
},
computed:{
num(){
var sum = 0;
for(i=0;i<this.userdata.length;i++){
sum += this.userdata[i].proportion
}
return sum
}
},
})
}
</script>
<body>
<div id="app">
<p>总票数:{{num}}</p>
<contents :userdata="userdata" ></contents>
</div>
<template id="content">
<div class="container">
<div class="p-3 border my-3" style="border-radius: 0.5em;" v-for="(item,index) in UserData">
<p>{{item.name}}:{{item.proportion}}票</p>
<div class="progress my-4">
<div class="progress-bar bg-primary" :style="{width:(item.proportion*100/abr).toFixed(2)+'%'}">{{(item.proportion*100/abr).toFixed(2)}}%</div>
</div>
<button @click="item.proportion++" class="btn btn-primary text-white">为{{item.name}}投一票</button>
</div>
</div>
</template>
</body>
</html>
vue基于通信的投票实时计算生成进度条
于 2022-10-21 11:45:30 首次发布