码迷,mamicode.com
首页 > Web开发 > 详细

04_JSX练习

时间:2019-04-13 23:25:45      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:title   框架   个数   数据   back   oct   函数   document   vue   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_JSX_DEMO</title>
</head>
<body>
    <h2>前端JS框架</h2>
    <div id="example1"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        /*
        * 功能:动态展示列表数据
        * 需求:将一个数据的数组转换为一个标签的数组(使用数组的map()方法)
        * */
        //1.数据
        const names = [jQuery, zepto, angular, react, vue];
        //2.创建虚拟dom
        const ul = (
            <ul>
                {
                    names.map((name, index) => <li key={index}>{name}</li>)             //箭头函数
                }
            </ul>
        );
        //3.渲染虚拟dom
        ReactDOM.render(ul, document.getElementById(example1));

    </script>
</body>
</html>

 

04_JSX练习

标签:title   框架   个数   数据   back   oct   函数   document   vue   

原文地址:https://www.cnblogs.com/zhanzhuang/p/10703337.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!