固定成本和变动成本包括哪些,以平常心对待职务变动发言稿

一、需求背景

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

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

二、将class与style绑定

我们可以这样声明一个div

<div    classbaseStyle     :class{vip:vipFlag,svip:sVipFlag}    >         <p>尊敬的{{welcomeInfo}},您好</p> </div>

// 初始化响应式变量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)? 超级用户:普通用户}

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

三、功能示例 四、代码展示

<template>    <p>我是样式绑定</p>    <div    classbaseStyle     :class{vip:vipFlag,svip:sVipFlag}    >         <p>尊敬的{{welcomeInfo}},您好</p>    </div></template><script langts setup>import { computed, onMounted } from vue;import { ref } from vue// 初始化响应式变量const userType  ref(0)const vipFlag ref(0)const sVipFlag  ref(0)const welcomeInfo  ref(普通用户)const debugArray  ref([0,1,1])// const welcomeInfo  () > computed(() > {//     if (vipFlag.value 1 || sVipFlag.value  1){//         return 超级用户//     }//     return 普通用户//     // return (vipFlag.value 1 || sVipFlag.value  1)? 超级用户:普通用户// })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)? 超级用户:普通用户}onMounted(() > {    // 假设这个方法是从后端调接口获取用户信息数据    getuserInfo();    // console.log()    setUsertype()})</script><style scoped>.baseStyle {    font-family: HarmonyOS Sans SC;}.vip {    color: red;}.svip {    font-style: italic;}</style>