1、vue3练习day01

我叫莫同学

已于 2024-04-18 20:08:55 修改

阅读量704

点赞数 12

分类专栏： vue全家桶练习文章标签： javascript 开发语言 ecmascript vue.js

于 2024-04-18 18:49:18 首次发布

本文链接：https://blog.csdn.net/weixin_57666779/article/details/137907607

版权

vue全家桶练习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需要掌握的知识

v-html / v-show / v-if / v-else / v-on / v-bind / v-for / v-mode

1、波仔的学习之旅

需求以及实现思路

需求：

默认展示数组中的第一张图片，点击上一页下一页来回切换数组中的图片

实现思路：

1.数组存储图片路径 ['url1','url2','url3'，...]

2.可以准备个下标index 去数组中取图片地址。

3.通过v-bind给src绑定当前的图片地址

4.点击上一页下一页只需要修改下标的值即可

5.当展示第一张的时候，上一页按钮应该隐藏。展示最后一张的时候，下一页按钮应该隐藏

核心代码

<script setup>
// 小案例-波仔的学习之旅
import {ref} from "vue"
const img = [//不能用@符号代替根路径，
  "/src/img/ex1/1.jpg",
  "/src/img/ex1/2.jpg",
  "/src/img/ex1/3.jpg",
  "/src/img/ex1/4.jpg",
  "/src/img/ex1/5.jpg",
  "/src/img/ex1/6.jpg",
]
const index = ref(0);
const length = img.length;
</script>

<template>
<button v-show="index > 0" style="padding: 5px;" @click="index--" >上一页</button>
<img :src="img[index]" alt="">
<button v-show="index < 5" style="padding: 5px;" @click="index++" >下一页</button>
</template>

<style scoped>

</style>

效果图

2、小黑的书架

需求以及实现思路

需求：

1.根据左侧数据渲染出右侧列表（v-for）

2.点击删除按钮时，应该把当前行从列表中删除（获取当前行的id，利用filter进行过滤）

实现思路：

1.v-for循环列表

2.使用filter过滤数组

核心代码

<script setup>
// 小案例-小黑的书架
import { ref } from "vue"
let booksList = ref([
  { id: 1, name: '《红楼梦》', author: '曹雪芹' },
  { id: 2, name: '《西游记》', author: '吴承恩' },
  { id: 3, name: '《水浒传》', author: '施耐庵' },
  { id: 4, name: '《三国演义》', author: '罗贯中' }
])
console.log(booksList.value);
function del(id){
  booksList.value =booksList.value.filter((item)=>{
      return item.id != id
    })
}
</script>

<template>
  <h2 v-if="booksList.length>0">小案例-小黑的书架</h2>
  <h2 v-else>没有数据</h2>
<ul>
  <li v-for="item in booksList" :key="item.id">
    {{ item.name }}----{{ item.author }}
    <button @click="del(item.id)">删除</button>
  </li>
</ul>
</template>

<style scoped></style>

效果图

3、综合案例-小黑记事本

需求以及实现思路

需求：

1、列表渲染

2、删除功能

3、添加功能

4、底部统计和清空，无数据隐藏底部

实现思路：

1、列表渲染：v-for key 的设置 {{ }} 插值表达式
2、删除功能：v-on 调用传参 filter 过滤覆盖修改原数组
3、添加功能：v-model 绑定 unshift 修改原数组添加
4、底部统计：获取数组.length累计长度

5、清空数据：原数组覆盖为空数组；

6、底部隐藏：v-show 控制隐藏

核心代码

<script setup>
// 综合案例-小黑记事本
import { ref } from "vue"
let list = ref([
  { id: 1, name: '跑步一公里' },
  { id: 2, name: '跳绳20分钟' },
])
let todoName = "";
function del(id) {
  list.value = list.value.filter((item) => {
    return item.id != id;
  })
}
function add() {
  if (todoName.trim() === "") {
    alert("小黑记事本提醒你：请输入任务名称")
    return;
  }
  list.value.unshift({
    id: new Date().getTime(),
    name: todoName
  })
  todoName = "";
  console.log(list.value);
}
function clear() {
  list.value = []
}
</script>

<template>
  <div class="container">
    <span style="color: pink;font-size: 30px;">小黑记事本</span>
    <div class="inp">
      <input type="text" placeholder="请输入任务" v-model="todoName">
      <button @click="add()">添加</button>
    </div>

    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        <span>{{ index + 1 }}、{{ item.name }}</span>
        <button @click="del(item.id)">
          删除
        </button>
        <hr>
      </li>
    </ul>
    <div v-if="list.length > 0"><span>合计：{{ list.length }}</span> <button @click="clear()">清空</button></div>

  </div>

</template>

<style scoped>
.container {
  width: 250px;
  height: auto;
  background-color: antiquewhite;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inp {
  width: 200px;
}

.inp input {
  box-sizing: border-box;
  width: 150px;
  height: 30px;
  background-color: white;
  border-radius: 5px;
  border: 1px solid brown;
  outline: none
}


button {
  height: 30px;
  border: none;
  background-color: brown;
  border-radius: 5px;
  color: white;
  box-sizing: border-box;
  width: 50px
}

ul {
  margin: 0;
  padding: 10px;
  width: 200px;
}

li {
  position: relative;
  list-style: none;
  width: 200px;
}

li>span {
  height: 30px;
  display: inline-block;
  width: 150px;
}
</style>

效果图

作业：翻转世界

需求以及实现思路

目标: 点击按钮 - 把文字取反显示 - 再点击取反显示(回来了)
提示: 字符串翻转，把字符串取反赋予回去

核心代码

<script setup>
// 作业：翻转世界
import { ref } from "vue"
let data =ref()
let data1;
function chuange(){
  data1 = data.value
  data1 = data1.split('').reverse().join('');
  data.value =data1
}
</script>
<template>
  <input type="text" v-model="data">
  <button @click="chuange()">翻转世界</button>
</template>

效果图

作业：折叠面板

需求以及实现思路

目标: 点击展开或收起时，把内容区域显示或者隐藏

核心代码

<script setup>
// 作业：翻转世界
import { ref } from "vue"
let flag = ref(1)
let text =ref("收起")
function change(){
  if(flag.value==0){
    flag.value = 1
    text.value = "收起"
  }else{
    flag.value = 0 
    text.value = "展开"
  }
}
</script>
<template>
  
  <h3>案例：折叠面板</h3>
  <div>
    <div class="title">
      <h4>芙蓉楼送辛渐</h4>
      <span class="btn" @click="change()" style="margin-left: 10px;color: red;">
        {{ text }}
      </span>
    </div>
    <div class="container" v-show="flag">
      <p>寒雨连江夜入吴,</p>
      <p>平明送客楚山孤。</p>
      <p>洛阳亲友如相问，</p>
      <p>一片冰心在玉壶。</p>
    </div>
  </div>
</template>
<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 1em;
}

.title h4 {
  line-height: 2;
  margin: 0;
}

.container {
  border: 1px solid #ccc;
  padding: 0 1em;
}

.btn {
  /* 鼠标改成手的形状 */
  cursor: pointer;
}
</style>

效果图

附加练习1.帅哥美女走一走

需求以及实现思路

目标: 点击按钮, 改变3个li的顺序, 在头就到末尾，在尾或者中间的就到头
提示: 操作数组里的顺序, v-for就会重新渲染li

核心代码

<script setup>
// 作业：翻转世界
import { ref } from "vue"
let student = ref([
  {id:1, name:"美女"},
  {id:2, name:"程序员"},
  {id:3, name:"帅哥"},
])
let length = student.value.length;
let flag = ref(-1)
let temp; //临时存放交换的对象
function go(){
  if(flag.value == -1){ //当未点击列表中任何一项是，flag为-1时不操作，
    return;
  }
  console.log(flag.value);
  if(flag.value == 0){
    temp = student.value[0]
    student.value.splice(0,1) //删除数组元素改变原数组
    student.value.push(temp)//尾添加
  }
  if(flag.value == length-1 || flag.value != 0){
    temp = student.value[flag.value]
    student.value.splice(flag.value,1)
    student.value.unshift(temp)//头添加
  }
  flag.value = -1 //将flag还原初始值，不还原点击按钮会一直交换
}
</script>
<template>
  <div style="color: rebeccapurple;">帅哥美女走一走</div>
  <div>
     <ul>
      <li v-for="(item,index) in student" :key="item.id" @click="flag = index">
        {{ index+1 }}--{{ item.name }}
      </li>
     </ul>
     <button @click="go()">走一走</button>
  </div>
</template>
<style scoped>
 li{
  cursor: pointer;
 }
</style>