基本信息
源码名称：利用js实现vue冒泡排序可视化特效
源码大小：0.04M
文件格式：.zip
开发语言：js
更新时间：2020-08-18
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 3 元　
   源码介绍 

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<div id="app">
	<div class="cards">
		<sort-card v-for="(card, index) in store.state.cards" :key="index" :value="card.value" :sort-index="card.sortIndex" :is-active="card.isActive" :is-locked="card.isLocked"></sort-card>
	</div>
	<div class="control-panel">
		<h1>Bubble Sort Visualizer</h1>
		<button aria-label="Reset" v-if="store.state.done" @click="reset(SORT_ARRAY)">
			<i class="fa fa-refresh" aria-hidden="true"></i>
		</button>
	</div>
</div>

<script type="text/x-template" id="sort-card-template">

	<!-- 绑定内联样式，通过 height 和 transform 来显示不同的div -->
	<div class="card-wrapper" :data-sort-index="sortIndex" v-bind:style="{height: value * HEIGHT_INCREMENT   'px',transform: 'translateX(' sortIndex*100 '%)'}">
	<!-- 通过改变class，来改变颜色 -->
	<div class="card" :class="cardClassObject">
	<div class="value">{{value}}</div>
	</div>
	</div>
  
</script>

<script src='js/vue.min.js'></script>
<script src='js/vuex.min.js'></script>

<script src="js/index.js"></script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>