vue两个卡⽚并排_Vue.js记忆卡⽚项⽬实战
Photo by Nada Gamal on Unsplash
如果你刚开始学习 Vue，想巩固基础知识，那么你可以试试通过这个有趣的练习来创建⼀个好玩的游戏。
在这篇⽂章中，我将逐步教你⽤ Vue.js 创建⼀个记忆卡⽚游戏。
这篇⽂章会介绍以下知识点：
- 使⽤ v-for 命令循环遍历⼀个数组对象
- 使⽤ v-bind 指令动态控制类名和样式
- 添加 Methods  和 Computed 属性
- 通过 Vue.set ⽅法向⼀个对象动态添加属性
- 使⽤ setTimeout ⽅法延迟 JavaScript 插件加载
- JavaScript 对象的浅拷贝和深拷贝
- 使⽤ Lodash ⼯具库
我们开始学习吧。
准备(包括项⽬所需的库)
第⼀步很简单，从 CDN 导⼊库到我们的 HTML5 基础代码中，这样就可以开始我们的⼩型项⽬了。
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Card Gametitle>
<link rel="stylesheet" href="stackpath.bootstrapcdn/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6
<script src="cdn.jsdelivr/npm/vue/dist/vue.js">script>
head>
<body>
body>
html>
允许⽤户看到卡⽚⽹格
接下来，我们定义⼀些必要的 HTML 页⾯结构、CSS 样式和⼀个基础的 Vue 实例，这样⽤户就看得到这些卡⽚⽹格了。
Vue 实例
创建⼀个 Vue 的实例，在 data 属性内部定义⼀个 cards 属性⽤于存放卡⽚列表。
let app = new Vue({
el: '#app',
data:{
cards: [
{
name: 'Apple',
img: 'apple.gif',
},
{
name: 'Banana',
img: 'banana.gif',
},
{
name: 'Orange',
img: 'orange.jpg',
},
{
name: 'Pineapple',
img: 'pineapple.png',
},
{
name: 'Strawberry',
img: 'strawberry.png',
},
{
name: 'watermelon',
img: 'watermelon.jpg',
},
],
},
});
数组内的每个对象包含两个属性：图⽚的名字(⽤于匹配)和卡⽚上的图⽚。
HTML
我们已经在 Vue 实例中准备好了数据，可以在 VueJS 中通过 v-for 指令循环遍历它们。
<div id="app">
<div class="row">
<div class="col-md-6 col-lg-6 col-xl-5 mx-auto">
<div class="row justify-content-md-center">
<div v-for="card in cards" class="col-auto mb-3 flip-container">
<div class="memorycard">rotate属性
<div class="front border rounded shadow"><img width="100" height="150" src="/assets/images/memorycard/pattern3.jpeg">div>                        <div class="back rounded border"><img width="100" height="150" :src="'/assets/images/memorycard/'+card.img">div>
div>
div>
div>
div>
div>
div>
我们使⽤了⼀些基础的 Bootstrap 框架内容搭配 VueJS 的 v-for 指令来循环遍历这些卡⽚，让它们以⽹格的形式展⽰出来。
每张记忆卡⽚由两部分组成：
- 正⾯：这⾥是⼀张所有卡⽚都会⽤到的公共图⽚(默认卡⽚显⽰的样⼦)
- 背⾯：这⾥包含每张卡⽚实际的图⽚(默认设置为隐藏)
添加⼀些基础的 CSS 样式，这样我们就只展⽰卡⽚的正⾯(默认卡⽚显⽰的样⼦)：
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
min-height: 120px;
cursor: pointer;
}
.front,
.back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-
moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
top: 0;
left: 0;
width: 100%;
}
.back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
position: absolute;
}
刷新页⾯，然后你应该看到 6 张正⾯的卡⽚以⽹格的形式展⽰，⽽每张卡⽚上的图⽚隐藏在背⾯。
卡⽚的正⾯(通过 v-for 循环指令展⽰)
翻转卡⽚
接下来，给卡⽚绑定⼀个事件，这样每当我们点击时，它应该翻转并显⽰背⾯的图⽚。
在原始的卡⽚数组的基础上添加另⼀个属性。这将确定当前卡⽚是否被翻转。
添加下⾯的 CSS 样式。当类名 flipped 添加到卡⽚的类名上时，将展⽰卡⽚的背⾯。同时，该样式可以设置⼀个好看的翻转动效。
.flip-container.flipped .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container.flipped .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
使⽤ Vue 的 created ⽣命周期函数添加新的属性，然后添加⼀个 flipCard ⽅法来翻转卡⽚。
created(){
this.cards.forEach((card) => {
card.isFlipped = false;
});
},
methods:{
flipCard(card){
card.isFlipped = true;
}
}
给卡⽚绑定点击事件，调⽤ flipCard ⽅法，然后使⽤ v-bind 指令给卡⽚绑定 flipped 类。
...
for="card in cards" class="col-auto mb-3 flip-container" :class="{ 'flipped': card.isFlipped }" @click="flipCard(card)">
...
似乎还不错，我们看看点击⼀下卡⽚是否会翻转。
点击卡⽚未翻转
这个⽅法⾏不通，为什么呢？
回到刚才在⽣命周期函数中，我们在那⾥遍历卡⽚列表，并添加了⼀个新的属性，isFlipped——看上去没问题，但是 Vue 不喜欢这样。想要让⼀个对象上新的属性⽣效，你需要使⽤ Vue.set ⽅法将它们添加到对象中。
created(){
this.cards.forEach((card) => {
Vue.set(card,'isFlipped',false)
});
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。