اتصال پویا از کلاس ها و سبک های CSS در Vue 3 ، Svelte 5 و Angular

<script lang="ts">
    import Icon from '@iconify/svelte';

    type Item = { id: number; label: string; purchased: boolean; higherPriority: boolean };

    let items = $state([] as Item[]);

    function togglePurchased(item: Item) {
        item.purchased = !item.purchased;
        newItem = '';
        newItemHigherPriority = false;
    }
</script>

<ul>
{#each items as item (item.id)} 
   <div class="list-item">
       <li class={[item.purchased && 'strikeout', item.higherPriority && 'priority']}>{item.id} - {item.label}</li>
       <button class="btn" onclick={() => togglePurchased(item)} aria-label="purchase an item">
         <Icon icon={!item.purchased ? "ic:baseline-check" : "ic:baseline-close" } />
     </button>
   </div>
{/each}
</ul>

import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';

type Item = { id: number; label: string; purchased: boolean; highPriority: boolean };

@Component({
  selector: 'app-shopping-cart',
  imports: [],
  template: `
     
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ShoppingCartComponent {
  items = signal<Item[]>([]);
  newItem = signal('');
  newItemHighPriority = signal(false);

  togglePurchase(item: Item) {
    this.items.update((items) => 
      return items.map((element) => (element.id === item.id ? { ...element, purchased: !element.purchased } : element));
    });
    this.newItem.set('');
    this.newItemHighPriority.set(false);
  }
}

@let itemClasses = {
    priority: item.highPriority,
    strikeout: item.purchased,
};

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { ref, computed } from 'vue'

const newItemHighPriority = ref(false)

const saveItem = () => {  … same logic as before … }
</script>

<template>
  <form  v-if="isEditing" @submit.prevent="saveItem">
    <label>
      <input type="checkbox" v-model="newItemHighPriority" />
      <span :style="{ 'font-weight': newItemHighPriority ? 'bold' : 'normal' }">
        High Priority</span
      >
    </label>
  </form>
</template>

<script lang="ts">
    import Icon from '@iconify/svelte';

    let newItemHigherPriority = $state(false);

    async function handleSubmit(event: SubmitEvent) {
    ... same logic as before ...
    }
</script>

<form method="POST" onsubmit={handleSubmit}>
   <label>
     <input id="higherPriority" name="higherPriority"                   type="checkbox" bind:checked={newItemHigherPriority}
      />
      <span style:font-weight={newItemHigherPriority ? 'bold' : 'normal'}> Higher Priority</span>
   </label>
</form>

import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-shopping-cart',
  imports: [FormsModule],
  template: `
      
  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ShoppingCartComponent {
  newItemHighPriority = signal(false);

  saveItem() { … same logic as before … }
}