vue阶段案例，练习filter、map、forEach，双向绑定，三元表达式，以及图片滚动，文字跳动等等。-编程知识

vue阶段案例，练习filter、map、forEach，双向绑定，三元表达式，以及图片滚动，文字跳动等等。

阶段案例

通过案例来练习双向绑定，三元表达式，以及图片滚动，文字跳动等等。

代码如下：

<template><table class="bjtp" ><div class="title" >{{title}}</div><div class="scroll-container"><div class="scroll-images"><img src="../assets/辣味鱿鱼丝.png" alt="Image 1"><span class="price">辣味鱿鱼丝￥10</span><img src="../assets/炭烧味鱿鱼丝.png" alt="Image 2"><span class="price">炭烧味鱿鱼丝￥12</span><img src="../assets/原味鱿鱼丝.png" alt="Image 3"><span class="price">原味鱿鱼丝￥15</span></div></div><ul><span style="color: red;"><strong>特价选购</strong></span><li v-for="food in foods"><img v-bind:src="food.image" class="imgs"><span>{{food.name}}</span><input type="checkbox" v-model="food.purchased"><span >{{  food.purchased ? "已选购" : "可选购" }}</span></li><li><input type="button" value="立即购买" style="width: 210px; color: black; background-color: red; height: 30px;"></li></ul></table></template><script setup>import {ref,reactive} from 'vue'let title = ref("欢迎来到老李店铺")setTimeout(() => {title.value = "全场5折起"},3000)import image1 from '../assets/辣味鱿鱼丝.png';import image2 from '../assets/炭烧味鱿鱼丝.png';import image3 from '../assets/原味鱿鱼丝.png'; const foods = reactive([{id : 1, name:'麻辣味的鱿鱼￥10', image:image1, purchased:false},{id : 2, name:'炭烧味鱿鱼丝￥12', image:image2, purchased:false},{id : 3, name:'原味的鱿鱼丝￥15', image:image3, purchased:false}]);</script><!-- src="https://hbimg.b0.upaiyun.com/d66b778917183e2814ed97dcbf8feab0624912dc5d4e-Y37mMA_fw658" -->
url(https://img95.699pic.com/xsj/06/tu/dp.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast)<style>.title{font-family: 仿宋;color: green;margin-top: 120px;margin-left: 75px;color: palevioletred;display: inline-block;animation: jump 2s infinite;}.bjtp{height: 1000px;width: 400px;background-image:url('../assets/image.png');background-size: 120%;background-repeat: no-repeat;margin-right: 20px;}.price{color: red;font-weight: bold;  /* 字体加粗 */}ul{list-style-type: none;margin-right: -30px;margin-top: 70px;}.imgs{width: 30px;height: 30px;margin-right: 10px;}.scroll-container {margin-top: 20px;margin-left: 110px;overflow: hidden;position: relative;height: 150px; /* 设置滚动区域的高度 */width: 260px;}.scroll-images {position: absolute;width: 100%;animation: scroll-up 20s linear infinite; /* 动画名称，持续时间，速率函数，循环次数 */}.scroll-images img {width: 100%;display: block;margin-bottom: 10px; /* 图片之间的间隔 */}@keyframes scroll-up {from {transform: translateY(0);}to {transform: translateY(-100%); /* 根据容器高度调整 */}}  @keyframes jump {0%, 100% { opacity: 0; transform: translateY(-10px); }50% { opacity: 1; transform: translateY(0); }}.text-container {opacity: 0;transition: opacity 0.2s;}</style>

项目结构预览：

在这里插入图片描述

效果展示：

在这里插入图片描述

对数组筛选过滤操作

let arr = [true, false, true, false]  /* 定义了一个数组 */
let arr2 = arr.filter(x => x)        /* filter常用在对数组的赛选或复制上，filter会把true的内容返回，并赋值给新数组arr2 */
console.log(arr2)
》》[true, true] let sum = [1, 2, 3, 4]  /* 定义了一个整数类型的数组 */
let arr3 = sum.filter(x => x <= 3 )   /* 此处设置了条件，会筛选出小于等于3的数字，并赋值给新数组arr3 */console.log(arr3)
》》[1, 2, 3]let arr4 = sum.map(x => x*2)   /* map多用于数组的计算，sum中每一个元素都乘以2，并赋值给新数组arr4 */
console.log(arr4)
》》[2, 4, 6, 8]let arr5 = sum.forEach(x => console.log(x)) /* forEach,不会有返回值，即无法给arr5赋值 */
》》1
》》2
》》3
》》4
console.log(arr5)
》》undefined  /* 证实了forEach 不会有返回值 */

利用filter的筛选功能可以替代for循环的一些操作，比如复制列表，循环输出等。接下来通过filter可以赛选false和true的值的特性，做一个当商品被选购时，从商品列表加入到，购物篮的效果。是基于上一节的综合案例而写！

主要改动代码如下：

  <section><ul><h1>可选购列表</h1><span style="color: red;"><strong>特价选购</strong></span><li v-for="food in foods.filter(x => ! x.purchased)" :key="food.id"><img v-bind:src="food.image" class="imgs"><span>{{food.name}}</span><input type="checkbox" v-model="food.purchased"><span class="duiqi">{{  food.purchased ? "已选购" : "可选购" }}</span></li></ul></section><section><ul><h1>已选购列表</h1><span style="color: red;"><strong>真香警告！！！</strong></span><li v-for="food in foods.filter(x => x.purchased)"><img v-bind:src="food.image" class="imgs"><span>{{food.name}}</span><input type="checkbox" v-model="food.purchased"><span class="duiqi">{{  food.purchased ? "已选购" : "可选购" }}</span></li><li><input type="button" value="立即购买" style="width: 210px; color: black; background-color: red; height: 30px;">   <button @click="Toclear">全部取消</button></li></ul></section>

效果截图如下：

在这里插入图片描述