react 实现vue里面的 v-html&&v-if&&v-show.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body>&

mystraight

6119人浏览 · 2018-04-16 10:18:46

mystraight · 2018-04-16 10:18:46 发布

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="header"></div>
        <!--React 的核心库-->
        <script src="../../js/react.js"></script>
        <!--React-->
        <!--提供与 DOM 相关的功能   V-->
        <script src="../../js/react-dom.js"></script>
        <!--ReactDOM-->
        <script src="../../js/babel.js"></script>
        <script type="text/babel">
            //v <= render(m)  function return就是一切 函数是第一公民
            //v <=> template(m)
            //JSX
            //渲染
            //单向数据绑定  M->V
            //函数式编程  过滤器
            //M
            var data = {
                num:20,
                bool:true,
                color:'red',
            }
            //V
            ReactDOM.render(
                <div>
                    {/*v-html*/}
                    <h2>
                        {(()=>{
                            return <p>123<span>456</span></p>
                        })()}
                    </h2>
                    {/*v-show*/}
                    <h2 style={{
                        display:data.bool?'block':'none'
                    }}>
                        显示或者隐藏
                    </h2>
                    {/*v-if*/}
                    {((bool)=>{
                        if(bool){
                            return "测试v-if"
                        }else{
                            return;
                        }
                    })(data.bool)}
                    {/*v-bind:  :xxx*/}
                    <p name={(()=>{
                        return "这是一个测试的名字"
                    })()}>name</p>
                    {/*@xxx  v-on:xxx*/}
                    <button onClick={()=>{
                        console.log("点击事件")
                    }}>OK</button>
                </div>, document.querySelector("#header"))
        </script>
    </body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^