Vue 3中按条件设置HTML元素的class值，同时附加其他的class值
Le Mon 24 February 2025
姑娘想给一个HTML元素的class属性添加一些内容。这些内容有的是直接写死的，有的要按条件设置。 这时候，姑娘需要给这个元素添加两个class属性。这让姑娘惊异不已。
<template>
<div class="flex justify-between" :class="{'color-white': enableWhite, 'color-red': enableRed}">
</template>
<script setup>
import { ref } from 'vue'
const enableWhite = ref(false)
const enableRed = ref(true)
</script>
这样，可用达到div的class属性最终合并为一的效果。这样的写法真是不耐看。
上述写法渲染后，可能的几种结果：
<div class="flex justify-between"></div>
<div class="flex justify-between color-white"></div>
<div class="flex justify-between color-red"></div>
<div class="flex justify-between color-white color-red"></div>
样式class与v-if的结合使用：
<PaymentMethod class="p-1" v-if="selected" v-for="({icon, label}, index) in payment_via_list" :index="index" :icon="icon" :label="label" @click="payment_method_clicked"></PaymentMethod>
<PaymentMethod class="p-1" v-if="!selected" v-for="({icon, label}, index) in payment_via_list" :index="index" :icon="icon" :label="label" @click="payment_method_clicked"></PaymentMethod>
样式class与v-for的结合使用：
<PaymentMethod class="p-1" class="{'bg-white': selected}" v-for="({icon, label}, index) in payment_via_list" :index="index" :icon="icon" :label="label" @click="payment_method_clicked"></PaymentMethod>
写法杂乱，难言美观。
Par 纳兰风来, Catégorie : 25-003
Tags :
Autres articles
uni-app得知缓存字节数目及清理缓存的办法
Le Sun 23 February 2025
姑娘有自己的cache_helper.js。
function human_readable_size(bytes, decimals = 2) {
if (!Number(bytes)) {
return '0 Bytes';
}
const kbToBytes = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = [
'Bytes',
'KiB',
'MiB',
'GiB',
'TiB',
'PiB',
'EiB',
'ZiB',
'YiB',
];
const index = Math.floor(
Math.log(bytes) / Math.log(kbToBytes),
);
return …Par 纳兰风来, Catégorie : 25-003
Lire la suite …uni-app得知当前应用程序的版本号码
Le Sun 23 February 2025
uni-app获取当前的应用程序的版本号的接口：
uni.getSystemInfo({
success: function ({appVersion}) {
console.log("girl's application version is:", appVersion)
}
})
姑娘为了方便，将它改装一下：
// params: cb(application_version_text)
function girls_application_version(cb) {
uni.getSystemInfo({
success({ appVersion }) {
cb(appVersion)
},
fail() {
cb(null)
}
})
}
async function girls_application_version() {
return await new Promise(function (resolve …Par 纳兰风来, Catégorie : 25-003
Lire la suite …Vue 3框架组合式API的生命周期挂钩
Le Sun 23 February 2025
姑娘不喜欢Vue，也不喜欢Vue 3框架组合式API中的生命周期挂钩。
姑娘喜欢回调函数。至少，回调函数很漂亮。姑娘喜欢漂亮之人、漂亮之物。
Vue 3中有如此之物：
function onMounted(callback: () => void): void
function onUpdated …Par 纳兰风来, Catégorie : 25-003
Lire la suite …Vue 3框架编写的应用程序中数组的用法
Le Sun 23 February 2025
姑娘说，要有数组。
import { ref } from 'vue'
const hers_fancy_integers = ref([1, 3, 5, 7, 9, 2, 4, 6, 8, 10])
使用数组：
hers_fancy_integers.value
姑娘发现，使用ref之物，读取它的值需要借助value。
如若直 …
Par 纳兰风来, Catégorie : 25-003
Lire la suite …Vue 3中制作自己的组件
Le Sat 22 February 2025
组件是可以多次重复使用的Vue代码。制作好自己的组件后，遇到相同的功能时，调用组件即可，不需要再重复组件的代码内容。
组 …
Par 纳兰风来, Catégorie : 25-003
Lire la suite …Grid组件在采用了Vue 3框架的应用中的用法
Le Sat 22 February 2025
首选要有个grid组件。
<!-- gridTitle:宫格名称 gridNum: 一行展示格数 gridList：宫格数据 @click:宫格点击按钮 -->
<ccGridButton gridTitle="九宫格" gridNum="3" :gridList="gridList" @click="gridClick"></ccGridButton>
<!-- gridTitle:宫格名称 gridNum: 一行 …