conditional

In the Vue:

The conditional judgment is controlled by the V-if V-else instruction

< the template > < div > < div v - if = "n % 2 = = = 0" > n is an even number < / div > < span v - else > n is an odd number of < / span > < / div > < / template >Copy the code

In the React:

JSX conditional judgment

Writing a

const Component = () => { return n%2===0 ? <div>n is even </div> : <span>n is odd </span>}Copy the code

If you need a div outside, wrap the JS code inside {}

const Component = () => { return ( <div> { return n%2===0 ? < div > n is an even number < / div >, < span > n is an odd number of < / span >} / / middle note to add curly brackets < / div >)}Copy the code

Notation 2: PutreturnGive the element a name

const Component = () => { const content = ( <div> { return n%2===0 ? </div> : <span>n is odd </span>} </div>) return content}Copy the code

Write 3: Give the thing inside a name

const Component = () => { const inner = n%2===0 ? <div>n is even </div> : <span>n is odd </span> const content = (<div> {inner} </div>) return content}Copy the code

Use if… else…

Const Component = () => {let inner if (n%2===0) {inner = <div>n is even </div>} else {inner = <span>n is odd </span>} const content = ( <div> { inner } </div> ) return content }Copy the code

conclusion

In Vue, only the syntax provided by Vue can be used for conditional judgment

In React, you can write whatever you want, just write JS, JSX in JS, okay

cycle

In the Vue:

Traversing array, object by v-for instruction

< the template > < div > < div v - for = "(n, index) in Numbers" : the key = "index" > subscript {{index}}, a value of {{n}} < / div > < / div > < / template >Copy the code

In the React:

Const Component = (props) =>{return props. Numbers. Map ((n,index)=>{return <div> subscript {index} is {n}</div>})}Copy the code

The component receives a parameter, props, which is an object. Use array.map to change each item in the array to a different form.

Const Component = (props) =>{return (<div> {props.numbers. Map ((n,index)=>{return <div> subscript {index} is {n}</div>})} </div> ) }Copy the code

You can also write it like this (less, map more)

const Component = (props) => { const array = [] for(let i=0; i<props.numbers.length; I++) {array. Push (< div > subscript values {I} for {props. The Numbers [I]} < / div >)} return (< div > {array} < / div >)}Copy the code