2.jsx数据绑定.html 986 B

1234567891011121314151617181920212223242526272829303132
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <script src="./babel.min.js"></script>
  8. <script src="./react.development.js"></script>
  9. <script src="./react-dom.development.js"></script>
  10. </head>
  11. <body>
  12. <div id="root"></div>
  13. <script type="text/babel">
  14. /**
  15. * vue {{}} 插值模板
  16. * react {} 表达式模板
  17. */
  18. const root = ReactDOM.createRoot(document.getElementById("root"));
  19. let data = '图图';
  20. let myName = <h2>我叫:{data}</h2>
  21. let num = <p>1+1={1+1}</p>
  22. // jsx语法中标签必须闭合
  23. let picture = <img src="./1.jpg" />
  24. let str = '喜羊羊';
  25. // 反转字符串
  26. let reverseStr = str.split("").reverse().join("");
  27. let reverseStr1 = [...str].reverse().join("");
  28. root.render(reverseStr)
  29. </script>
  30. </body>
  31. </html>