第三周学习汇报（小鸡uniapp页面）-CSDN博客

7.21日（demo4）

这段代码实现了一个“彩色计数盒子 + 开关控制按钮加载状态”的小示例：

模板部分

<view class="box" @click="onClick" :style="{background:color}">
  {{num}}
</view>

一个正方形盒子（.box），点击时会触发 onClick 方法。
盒子背景色由响应式变量 color 控制，初始为 #fc359a。
盒子内显示数字 num，初始为 1，点击一次加 1。

<switch checked="true" @change="onChange" />

一个开关，默认开启（checked=“true”）。
开关状态变化时会触发 onChange 方法。

<button type="primary" :loading="isloading">我是一个按钮</button>

一个主色调按钮，文字为“我是一个按钮”。
按钮是否显示加载动画由响应式变量 isloading 控制。

逻辑部分

import {ref} from "vue"
const num = ref(1)           // 计数器，初始为1
const color = ref("#fc359a") // 盒子背景色，初始为粉色
const isloading = ref(false) // 按钮加载状态，初始为false（注意：代码中误写为字符串"false"）

// 点击盒子时触发
function onClick() {
  num.value++ // 计数器+1
  // 生成随机6位十六进制颜色（如 #a1b2c3）
  color.value = "#" + String(Math.random()).substring(3, 9)
}

// 开关状态变化时触发
function onChange(e) {
  // 开关开启时（e.detail.value为true），isloading为false，按钮不显示加载
  // 开关关闭时（e.detail.value为false），isloading为true，按钮显示加载
  isloading.value = !e.detail.value
}

样式部分

.box {
  width: 200px;
  height: 200px;
  background: orange; // 默认背景色（会被动态style覆盖）
}

定义盒子的宽高为 200px，默认背景色为橙色（实际会被 color 变量覆盖）。
关键行为总结

用户操作	结果
点击盒子	计数器+1，盒子背景色变为随机新颜色
切换开关	按钮的加载状态会反转（开→关时按钮开始转圈，关→开时停止）