Vue简单练手案例
适合vue初学者的3个练手小案例,加深对数据驱动视图的理解,体会到与原生js直接操纵Dom节点的区别
·
以下是给初学Vue的小伙伴的三个练手小案例,希望对新手有一点点帮助~
【案例1】
要求:点击按钮, 依次改变3个li的顺序
效果图:
思路分析:利用数组的增加和删除方法实现
代码:
<template>
<div id="app">
<ul>
<li v-for="(item , idx) in arr" :key="idx">{{item}}</li>
<button @click="fn">走一走</button>
<hr>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: ['1.四宫辉夜', '2.藤原千花', '3.白银御行', '4.石上优']
}
},
methods: {
fn() {
let firstDle = this.arr.shift()
console.log(firstDle); //数组删除操作返回的是被删除的元素
console.log(this.arr.push(firstDle)) //数组新增操作返回的是数组的长度
}
},
}
</script>
<style>
body {
background-color: #ccc;
}
#app {
width: 400px;
margin: 20px auto;
background-color: #fff;
border: 4px solid blueviolet;
border-radius: 1em;
box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.5);
padding: 1em 2em 2em;
}
h3 {
text-align: center;
}
.title {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #000;
padding: 0 1em;
}
.title h4 {
line-height: 2;
margin: 0;
}
.container {
border: 1px solid #000;
padding: 0 1em;
}
.btn {
/* 鼠标改编成小手的形状 */
cursor: pointer;
}
</style>
【案例2】
要求:点击生成按钮, 新增一个li(随机数字)和删除按钮, 点击删除按钮, 删除对应的li和值
效果图:
思路分析:利用数组驱动视图,增加和删除操作都围绕数组展开,摒弃之前的dom节点操作
代码:
<template>
<div id="app">
<ul>
<li v-for="(item , idx) in arr" :key="idx">
{{ item }} <button @click="fn1(idx)">删除</button>
</li>
<hr>
</ul>
<button @click="fn">点击生成随机数</button>
</div>
</template>
<script>
export default {
data() {
return {
arr: [Math.floor(Math.random() * 100), Math.floor(Math.random() * 100)],
}
},
methods: {
fn() {
let num = Math.floor(Math.random() * 100)
this.arr.push(num)
},
fn1(idx) {
this.arr.splice(idx, 1)
}
},
}
</script>
【案例3】
要求:完成商品浏览和删除功能, 当无数据时给用户提示信息
效果图:
思路分析:依旧是数据驱动视图,利用数组的相关方法去实现,注意条件判断
代码:
<template>
<div id="app">
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<!-- 循环渲染的元素tr -->
<tr v-for="(item , idx) in list" :key="idx">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td>
<button @click="list.splice(idx,1)">删除</button>
</td>
</tr>
<!-- 优化后的代码 -->
<tr v-if="list.length == 0">
<td colspan="4">{{mesg}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: "奔驰", time: "2020-08-01" },
{ id: 2, name: "宝马", time: "2020-08-02" },
{ id: 3, name: "奥迪", time: "2020-08-03" },
],
mesg: '没有数据咯~'
};
}
};
</script>
更多推荐
已为社区贡献2条内容
所有评论(0)