Does the assignment of Boolean types such as tag attribute disabled selected checked not take effect?

Native html

Set up false the truth is that true

    <select>
      <option>1</option>
      <option>2</option>
      <option selected>3</option>
      <option selected=false>4</option>
    </select>

The above code is actually select Selected by default 4

In fact, no matter you let selected=0 selected=false selected=none wait , It is considered to be set to true
Because in the original html in , The assignment of all attributes is actually a string , Assign a string to a Boolean attribute , Will be forcibly converted to Boolean , therefore "false" =>true “0” => true …

So in a sense , We can only use js perhaps jquery Give it a Boolean value
In this way, the default selection is no 4 individual

 <select>
   <option>1</option>
   <option>2</option>
   <option selected>3</option>
   <option id="option4">4</option>
 </select>

 var option4 = document.getElementById("option4")
 option4.selected = true

react The Boolean property in can only be set to Boolean

Set up false Considered invalid , Default choice 3

      <select>
        <option>1</option>
        <option>2</option>
        <option selected>3</option>
        <option selected={
    false}>4</option>
      </select>

Set up undefined It's actually false, The final default choice 3

      <select>
        <option>1</option>
        <option>2</option>
        <option selected>3</option>
        <option selected={
    undefined}>4</option>
      </select>

Of course, you can also set an expression to judge , Default choice 4

import React, {
     useState } from "react";
import {
     Link } from "react-router-dom";
const Login: React.FC = () => {
    
  const [options, setOptions] = useState([1, 2, 3, 4])
  return (
    <div>
      <Link to="/home">Home</Link>

      <select>
        {
    
          options.map((item) => {
    
            return <option key={
    item} selected={
    item === 4} >
              {
    item}
            </option>
          })
        }
      </select>
    </div>
  );
}

export default Login;

But this may give a warning react-dom.development.js:86 Warning: Use the defaultValue or value props on instead of setting selected on .
It means to let you directly in select Label settings value perhaps defaultValue Rather than to option Set up selected

In this way, the default selection is 2

import React, {
     useState } from "react";
import {
     Link } from "react-router-dom";
const Login: React.FC = () => {
    
  const [options, setOptions] = useState([1, 2, 3, 4])
  return (
    <div>
      <Link to="/home">Home</Link>

      <select value={
    2}>
        {
    
          options.map((item) => {
    
            return <option key={
    item} >
              {
    item}
            </option>
          })
        }
      </select>
    </div>
  );
}

export default Login;

react Whether other Boolean attributes in are related to selected In the same way

Only the first one 4 individual input Disabled

import React, {
     useState } from "react";
import {
     Link } from "react-router-dom";
const Login: React.FC = () => {
    
  const [options, setOptions] = useState([1, 2, 3, 4])
  return (
    <div>
      <Link to="/home">Home</Link>

        {
    
          options.map((item) => {
    
            return <input key={
    item} disabled={
    item === 4} />
          })
        }
    </div>
  );
}

export default Login;

Only the first one 4 individual checkbox To be selected

import React, {
     useState } from "react";
import {
     Link } from "react-router-dom";
const Login: React.FC = () => {
    
  const [options, setOptions] = useState([1, 2, 3, 4])
  return (
    <div>
      <Link to="/home">Home</Link>

        {
    
          options.map((item) => {
    
            return <input type="checkbox" key={
    item} checked={
    item === 4} />
          })
        }
    </div>
  );
}

export default Login;

be-all input Are not read Pattern , It can be input normally

import React, {
     useState } from "react";
import {
     Link } from "react-router-dom";
const Login: React.FC = () => {
    
  const [options, setOptions] = useState([1, 2, 3, 4])
  return (
    <div>
      <Link to="/home">Home</Link>

        {
    
          options.map((item) => {
    
            return <input key={
    item} readOnly={
    false} />
          })
        }
    </div>
  );
}

export default Login;

After a variety of Boolean tests ,react The Boolean attribute performance in is consistent

vue Set Boolean property in

Set to... Separately false, It's actually true. In fact, the default selection is 3

 <select>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3" selected>3</option>
   <option value="4" :selected="false">4</option>
 </select>

If you pass data The way of attributes , Can achieve false The value of the , The default is 3

<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3" selected>3</option>
  <option value="4" :selected="selected1">4</option>
</select>

export default class Home extends Vue {
    
  selected1 = false
}
</script>

Of course, the judgement is also ok , General choice === How to judge , By default, the second option is selected 2 individual

<select>
  <option v-for="item in options" :key="item" value="item" :selected="item === 2">
    {
    {
     item }}
  </option>
</select>
export default class Home extends Vue {
    
  options = [1, 2, 3, 4]
}
</script>

vue Other Boolean attributes are similar to selected Is it consistent ？

Only the second input Disabled

<input v-for="item in options" :key="item" value="item" :disabled="item === 2" />
export default class Home extends Vue {
    
	options = [1, 2, 3, 4]
}

All false take effect Are not disabled

    <input v-for="item in options" :key="item" value="item" :disabled="false" />

All true take effect Are disabled

    <input v-for="item in options" :key="item" value="item" :disabled="true" />

checked disabled readonly Basically, all Boolean types behave like this