階段案例

通過案例來練習雙向綁定，三元表達式，以及圖片滾動，文字跳動等等。

代碼如下：

<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>

效果截圖如下：

接下來我想實現，全部選擇加入購物車，和全部取消的效果。。。