Vue简单练手案例

以下是给初学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>