©2020-2024 ioDraw All rights reserved
以下是给初学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>