vue基于通信的投票实时计算生成进度条

MuFeng@

已于 2023-01-26 14:20:21 修改

阅读量659

点赞数

分类专栏： vue练习题文章标签： vue.js javascript ecmascript

于 2022-10-21 11:45:30 首次发布

本文链接：https://blog.youkuaiyun.com/m0_58451019/article/details/127443343

版权

vue练习题专栏收录该内容

9 篇文章

订阅专栏

在这里插入图片描述

<!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>