与Vue相比React的指令是怎么使用？

v-text

 

import React, { Component } from 'react'

export default class App extends Component{
    
    render(){
        let value = 'hello world';
        return (
            <div>
                {/*v-text*/}
                <p>{value}</p>
            </div>
        )
    }
}

 

v-if

 

import React, { Component } from 'react'

export default class App extends Component{
    
    render(){
        let isExist = true;
        return (
            <div>
                {/* v-if */}
                {isExist && <div className="box"></div>}
                {isExist ? <div className="box"></div>:''}
            </div>
        )
    }
}

 

v-bind

 

import React, { Component } from 'react'

export default class App extends Component{
    
    render(){
        let value = 'hello world';
        let path = 'http://www.baidu.com';
        return (
            <div>
                {/* v-bind */}
                <h1 title={value}></h1>
                <a href={path}>百度一下</a>
            </div>
        )
    }
}

 

class 与 style

import React, { Component } from 'react'

export default class App extends Component{
    
    render(){

　　　　　　let isExist = true;

        let classValue1 = "a b c";
        // let classValue2 ='b c' + (isExist?' a':'');
        let classValue2 ='b c ' + (isExist && 'a');
        let styleValue1 = {
            width: '100px',
            height: '100px',
            background: 'red'
        };
        return (
            <div>
                {/* class 自己拼接class的格式   style 写成对象的形式 */}
                <div className={classValue2}></div>
                <div style={styleValue1}>box</div>
                <div style={{width: '100px', height: '50px', background: 'yellow'}}>box</div>
            </div>
        )
    }
}

v-show

 

import React, { Component } from 'react'

export default class App extends Component{
    
    render(){
        let isShow = false;
        return (
            <div>
                {/* v-show */}
                <div className="box" style={{display: isShow?'':'none'}}></div>
            </div>
        )
    }
}

 

v-for

 

import React, { Component } from 'react'

export default class App extends Component{
    
    render(){
        let arr = ['a', 'b', 'c', 'd'];
        let obj = {
            a: 1,
            b: 2,
            c: 3
        }
        return (
            <div>
                {/* v-for */}
                <ul>
                    {
                        arr.map((item, index)=>{
                            return <li key={index}>{item}----{index}</li>
                        })
                    }
                </ul>

                <ul>
                    {
                        (function(){
                            let newArr = [];
                            for(let key in obj){
                                newArr.push(
                                    <li key={key}>{key}: {obj[key]}</li>
                                );
                            }
                            return newArr;
                        })()
                    }
                </ul>
                

                <ul>
                    {
                        Object.entries(obj).map(([key, value])=>{
                            return <li key={key}>{value}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

 

v-on

 

import React, { Component } from 'react'

export default class App extends Component{
    
    render(){
        return (
            <div>
                {/* v-on */}
                <button onClick={()=>{
                    console.log('按钮点击了1');
                }}>按钮1</button>

                <button onClick={this.btnAction}>按钮2</button>
            </div>
        )
    }
    btnAction(){
        console.log('按钮点击了2');
    }
}

 

 

import React, { Component } from 'react'

export default class App extends Component{

    constructor(){
        super();
        this.state = {
            message: 'hello world'
        }
    }
    
    render(){
        let value = 'hello react';

        return (
            <div>

                {/* v-on */}

                {/* 事件的写法 */}
                <button onClick={()=>{
                    console.log('按钮点击了1:', this.state.message);
                }}>按钮1</button>

                <button onClick={this.btnAction2.bind(this)}>按钮2</button>

                <button onClick={this.btnAction3}>按钮3</button>

                <button onClick={()=>this.btnAction4()}>按钮4</button>

                <br/>
                <br/>
                <br/>

                {/* 事件传参 */}
                <button onClick={(ev)=>{
                    console.log('按钮点击了1:', this.state.message);
                    console.log('按钮点击了1:', value);
                    console.log(ev);
                }}>按钮1</button>

                <button onClick={this.btnAction2.bind(this, value, value, value)}>按钮2</button>

                <button onClick={this.btnAction3}>按钮3</button>{/*不支持传参 */}

                <button onClick={(ev)=>{
                    return this.btnAction4(value, ev);
                }}>按钮4</button>

            </div>
        )
    }


    btnAction2(val1, val2, val3, ev){
        console.log('按钮点击了2: ', this.state.message);
        console.log('按钮点击了2: ', val1);
        console.log(ev);
    }


    btnAction3 = ()=>{
        console.log('按钮点击了3: ', this.state.message);
    }

    btnAction4(val, ev){
        console.log('按钮点击了4: ', this.state.message);
        console.log('按钮点击了4: ', val);
        console.log(ev);
    }
}