v-if / r-if

import { type FC, ref } from '@rue-js/rue';

const VIfAndRIf: FC = () => {
  const phase = ref<'draft' | 'review' | 'published'>('draft');
  const plan = ref<'pro' | 'basic' | 'offline'>('pro');

  return (
    <div className="grid gap-4">
      <div v-if={phase.value === 'draft'} className="alert alert-info">草稿中</div>
      <div v-else-if={phase.value === 'review'} className="alert alert-warning">审核中</div>
      <div v-else className="alert alert-success">已发布</div>

      <p r-if={plan.value === 'pro'} className="badge badge-success badge-lg">专业版在线</p>
      <p r-else-if={plan.value === 'basic'} className="badge badge-info badge-lg">标准版在线</p>
      <p r-else className="badge badge-error badge-lg">当前离线</p>
    </div>
  );
};

export default VIfAndRIf;