React, Vue 및 Svelte: 선택 바인딩 비교

바인딩 선택...



추가 코드 없이 React는 첫 번째 값이 비활성화되어 있기 때문에 다음 값을 선택한다는 것을 알 수 있습니다. Vue와 Svelte는 선택 항목을 비워둡니다.

확인해보세요 🚀

반응하다



Live Example

const [selected, setSelected] = useState<string>('Choose one option');

<section>
    <h2>Select</h2>
    <select onChange={(e) => setSelected(e.target.value)}>
        <option value="" disabled>
        Please select one
        </option>
        <option>Frontend Developer</option>
        <option>Backend Developer</option>
        <option>Fullstack Developer</option>
    </select>
    <p>Selected: {selected}</p>
</section>




Live Example

const selected = ref('Choose one option');

<section>
    <h2>Select</h2>
    <select v-model="selected">
      <option value="" disabled>Please select one</option>
      <option>Frontend Developer</option>
      <option>Backend Developer</option>
      <option>Fullstack Developer</option>
    </select>
    <p>Selected: {{ selected }}</p>
</section>


날씬한



Live Example

let selected: string = 'Choose one option';

<section>
    <h2>Select</h2>
    <select bind:value={selected}>
      <option disabled value="">Please select one</option>
      <option>Frontend Developer</option>
      <option>Backend Developer</option>
      <option>Fullstack Developer</option>
    </select>
    <p>Selected: {selected}</p>
</section>

좋은 웹페이지 즐겨찾기