vueDay03——可灵活变动的class样式

一、需求背景

有时候我们需要对不同身份的用户在同一个组件上展示不同的样式（界面这里暂且不谈），我们就需要控制该组件在不同的数据下呈现不同的样式

这时候我们就可以使用:class属性来动态调整样式

二、将class与style绑定

我们可以这样声明一个div

 
        
尊敬的{{welcomeInfo}},您好！
 

// 初始化响应式变量
const userType = ref(0)
const vipFlag =ref(0)
const sVipFlag = ref(0)
const welcomeInfo = ref('普通用户')

.baseStyle {
    font-family: "HarmonyOS Sans SC";
}
.vip {
    color: red;
}
.svip {
    font-style: italic;
}

然后通过后端接口，在页面渲染完毕的时候获取数据，将数据渲染上去

onMounted(() => {
    // 假设这个方法是从后端调接口获取用户信息数据
    getuserInfo();
    // console.log("")
    setUsertype()
})

const getuserInfo = () => {
    userType.value = debugArray.value[0]
    vipFlag.value  = debugArray.value[1]
    sVipFlag.value = debugArray.value[2]
}

const setUsertype = () => {
     welcomeInfo.value = (vipFlag.value ===1 || sVipFlag.value === 1)? "超级用户":"普通用户"
}

通过判断后端传来的不同数据（前端使用一个数组进行模拟）来渲染不同的样式

三、功能示例

四、代码展示