正心全栈编程-文档站

Appearance

标签排序 ​

目标：点击按钮，改变 3 个 li 的顺序，在头上的就到末尾。

提示：操作数组里的顺序，v-for 就会重新渲染 li

  • 0-帅哥
  • 1-美女
  • 2-程序猿

参考代码

html
<script setup>
  import { ref } from "vue";

  const arr = ref(["帅哥", "美女", "程序猿"]);
  const btn = () => {
    arr.value.push(arr.value[0]);
    arr.value.shift();
  };
</script>

<template>
  <div id="app">
    <ul>
      <li v-for="(item, index ) in arr" :key="item">{{ index }}-{{ item }}</li>
    </ul>
    <button @click="btn">走一走</button>
  </div>
</template>

<style scoped></style>

元素操作 ​

目标：点击生成按钮，新增一个 li(随机数字) 和删除按钮，点击删除按钮，删除对应的 li 和值

提示：数组渲染列表，生成和删除都围绕数组操作

正确代码:(先不要看)

html
<script setup>
  import { ref } from "vue";

  const arr = ref([1, 5, 3]);
  const add = () => {
    arr.value.push(Math.floor(Math.random() * 20));
  };
  const del = (index) => {
    arr.value.splice(index, 1);
  };
</script>

<template>
  <div id="app">
    <ul>
      <li v-for="(item, ind) in arr" :key="item">
        <span>{{ item }}</span>
        <button @click="del(ind)">删除</button>
      </li>
    </ul>
    <button @click="add">生成</button>
  </div>
</template>

<style scoped></style>

购物车 ​

目标：完成商品浏览和删除功能，当无数据给用户提示

  • 需求 1: 根据给的初始数据，把购物车页面铺设出来
  • 需求 2: 点击对应删除按钮，删除对应数据
  • 需求 3: 当数据没有了，显示一条提示消息

html+css 和数据代码结构 (可复制接着写)

vue
<script setup>
import { reactive } from "vue";

const arr = reactive([
  { id: 1, name: "奔驰", time: "2020-08-01" },
  { id: 2, name: "宝马", time: "2020-08-02" },
  { id: 3, name: "奥迪", time: "2020-08-03" },
]);
</script>

<template>
  <table class="tb">
    <tr>
      <th>编号</th>
      <th>品牌名称</th>
      <th>创立时间</th>
      <th>操作</th>
    </tr>
    <!-- 循环渲染的元素 tr -->
    <tr>
      <td>1</td>
      <td>车名</td>
      <td>2020-08-09</td>
      <td>
        <button>删除</button>
      </td>
    </tr>
    <tr>
      <td colspan="4">没有数据咯~</td>
    </tr>
  </table>
</template>

<style scoped>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>

正确代码 (先不要看)

vue
<script setup>
import { reactive } from "vue";

const arr = reactive([
  { id: 1, name: "奔驰", time: "2022-08-01" },
  { id: 2, name: "宝马", time: "2022-08-02" },
  { id: 3, name: "奥迪", time: "2022-08-03" },
]);

// 删除按钮 - 得到索引，删除数组里元素
const del = (index) => {
  arr.splice(index, 1);
};
</script>

<template>
  <table class="tb">
    <tr>
      <th>编号</th>
      <th>品牌名称</th>
      <th>创立时间</th>
      <th>操作</th>
    </tr>
    <!-- 循环渲染的元素 tr -->
    <!-- 循环渲染的元素 tr -->
    <tr v-for="(item, index) in arr" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.time }}</td>
      <td>
        <button @click="del(index)">删除</button>
      </td>
    </tr>
    <tr v-if="arr.length === 0">
      <td colspan="4">没有数据咯~</td>
    </tr>
  </table>
</template>

<style scoped>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>

选择喜欢的 ​

目标：用户选择栏目，把用户选中的栏目信息在下面列表显示出来

提示：vue 变量是数组类型，绑定在 checkbox 标签上

js
// 数据在这里
["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"];
vue
<script setup>
import { reactive, ref } from "vue";

const form = reactive({
  fruit: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
  hobby: [],
});
</script>

<template>
  <div>
    <h3>请选择你喜欢的专栏：</h3>
    <span v-for="item in form.fruit">
      <input type="checkbox" :value="item" v-model="form.hobby" />{{ item }}
    </span>
    <hr />
    <ul>
      <li v-for="item in form.hobby">{{ item }}</li>
    </ul>
  </div>
</template>

<style scoped></style>