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

原创 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>
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35568483/article/details/79957130

React(8)条件渲染(类似 Vue 的 v-if)

14、条件渲染(类似 Vue 的 v-if) 讲道理说,React 本身的条件渲染,没有 Vue.js 用起来舒服。Vue.js 只需要在标签上添加 v-if 或者 v-show 就行,但 Reac...
  • qq20004604
  • qq20004604
  • 2018-02-12 18:12:02
  • 264

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

&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta cha...
  • qq_35568483
  • qq_35568483
  • 2018-04-16 10:18:46
  • 20

React 入门实例教程

作者: 阮一峰 现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑...
  • naipeng
  • naipeng
  • 2016-10-11 22:13:49
  • 693

01+Angular4.x+angular5.x介绍以及和vue、react对比

  • 2018年01月03日 23:58
  • 19.82MB
  • 下载

我的vue与react实践对比

其实我并不想写些框架之间的对比,每个框架各有所长,大家也各有所爱,只想说“PHP是世界上最好的语言”^_^,虽然我没看过一眼PHP的代码。工作中移动端我用的是vue 2.0,PC端为了兼容可恶的IE8...
  • github_36457552
  • github_36457552
  • 2016-11-29 23:56:56
  • 1400

React-高级教程完整版

React 高级教程完整版这标题可能有点不太贴切或符合内容,从官方上来区分这部分内容确实属于高级部分,只是由于个人原因,在后面的一些章节并没有记录在列。也为了承接上一篇,因此勉强将标题定位:“Reac...
  • gccll
  • gccll
  • 2017-04-05 23:01:43
  • 2727

...<em>React</em> The Complete Guide to <em>ReactJS</em> and Friends 2017 6 <em>v</em>32...

Fullstack React The Complete Guide to <em>ReactJS</em> and Friends 2017 6 <em>v</em>32 ...(2017-06-14) Bug Reports <em>If</em> you’d like to report any bugs, typos, ...
  • 2018年04月18日 00:00

VUE,REACT相关视频下载

  • 2018年03月17日 17:24
  • 253KB
  • 下载

vue开发:vue,angular,react数据双向绑定原理分析

传统做法 前端维护状态,手动操作DOM更新视图。前端框架对服务器数据通过模版进行渲染。当用户产生了一个动作之后,我们通过document.getElementBy... 手动进行DOM更新。  ...
  • Generon
  • Generon
  • 2017-06-01 21:55:17
  • 5670

React 详解

React 官方文档 : https://reactjs.org/ React Native 智能提示 : 可参考 https://github.com/virtoolswebplayer/Reac...
  • chenshun123
  • chenshun123
  • 2018-01-08 08:46:35
  • 115
收藏助手
不良信息举报
您举报文章:react 实现vue里面的 v-html&&v-if&&v-show.html
举报原因:
原因补充:

(最多只允许输入30个字)