<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>vue实现冒泡排序可视化特效</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>
</body>
</html>
vue.js实现的冒泡数字阶梯顺序排列可视化动画特效源码.zip
版权申诉
123 浏览量
2022-11-01
00:02:50
上传
评论
收藏 35KB ZIP 举报
vue.js实现的冒泡数字阶梯顺序排列可视化动画特效源码.zip （5个子文件） 
132677800128954734 css 
style.css 2KB
index.html 1KB js index.js 6KB vuex.min.js 10KB vue.min.js 75KB资源评论
