阶段案例
通过案例来练习双向绑定,三元表达式,以及图片滚动,文字跳动等等。
代码如下:
<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>
效果截图如下:
接下来我想实现,全部选择加入购物车,和全部取消的效果。。。