Vue 使用lodash.js完成列表添加、删除、打乱顺序
使用lodash.js完成列表添加、删除、打乱顺序。并在添加、删除、打断顺序时实现过渡效果，效果如下图：
我写出了下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习5</title>
<script src="../js/vue.js"></script>
<style>
.list-item {
display: inline-block;
margin-right: 10px;
background-color: red;
border-radius: 50%;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
color: #fff;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>
</head>
<body>
<div id="app">
<button @click="add">随机添加</button>
<button @click="remove">随机删除</button>
<button @click="shuffle">打乱顺序</button>
<transition-group name="'list" tag="p">
<span v-for="item in items" :key="item" class="list-item">
{{item}}
</span>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
items: [1,2,3,4,5],
nextNum: 6
},
methods: {
add () {
this.nextNum = Math.floor(Math.random() * 10);
var index = Math.floor(Math.random() * this.items.length);
this.items.splice(index, 0, this.nextNum)
},
remove () {
var index = Math.floor(Math.random() * this.items.length);
this.removedNum = this.items[index];
this.items.splice(index,1)
},
shuffle () {
}
}
})
</script>
</body>
</html>
如何实现打乱顺序的方法和如图给出的样式？
直接Math.random随机排序，不一定用lodash.js
transition-group 标签未闭合，并且name属性值多了单引号，示例代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习5</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.list-item {
display: inline-block;
margin-right: 10px;
background-color: red;
border-radius: 50%;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
color: #fff;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to {
opacity: 0;
transform: translateY(30px);
}
#app button{border:dotted 1px blue;border-radius:5px;width:100px;height:30px}
#app .list-item{border:dotted 2px green;border-radius:5px;background:#efefef;color:#f00;width:30px;height:30px;line-height:30px}
</style>
</head>
<body>
<div id="app">
<button @click="add">随机添加</button>
<button @click="remove">随机删除</button>
<button @click="shuffle">打乱顺序</button>
<transition-group name="list" tag="p">
<span v-for="item in items" :key="item" class="list-item">
{{item}}
</span>
</transition-group>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
items: [1, 2, 3, 4, 5],
nextNum: 6
},
methods: {
add() {
this.nextNum = Math.floor(Math.random() * 10);
var index = Math.floor(Math.random() * this.items.length);
this.items.splice(index, 0, this.nextNum)
},
remove() {
var index = Math.floor(Math.random() * this.items.length);
this.removedNum = this.items[index];
this.items.splice(index, 1)
},
shuffle() {
var nItems = JSON.parse(JSON.stringify(this.items));
nItems = nItems.sort(function () { return Math.random() < .5 ? 1 : -1; });
while (this.items.length) this.items.pop();
setTimeout(() => {
for (var v of nItems) this.items.push(v)
}, 1000)
}
}
})
</script>
</body>
</html>
这个是vue官方文档上动画那块的示例吧！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>练习5</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<style>
#app button {
border: 1px dashed purple;
border-radius: 5px;
}
.list-item {
display: inline-block;
margin-right: 10px;
background-color: pink;
border-radius: 50%;
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
color: #fff;
transition: all 1s;
border: 1px dashed green;
border-radius: 10px;
}
.list-enter-active,
.list-leave-active {
transition: all 1s;
}
.list-enter,
.list-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>
</head>
<body>
<div id="app">
<button @click="add">随机添加</button>
<button @click="remove">随机删除</button>
<button @click="shuffle">打乱顺序</button>
<transition-group name="list" tag="p">
<span v-for="item in items" :key="item" class="list-item">
{{item}}
</span>
</transition-group>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
items: [1, 2, 3, 4, 5],
nextNum: 6,
},
methods: {
randomIndex: function () {
return Math.floor(Math.random() * this.items.length);
},
add: function () {
this.items.splice(this.randomIndex(), 0, this.nextNum++);
},
remove: function () {
this.items.splice(this.randomIndex(), 1);
},
shuffle: function () {
this.items = _.shuffle(this.items);
},
},
});
</script>
</body>
</html>
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632