尧图网站建设 
1. 放在标签之间渲染内容用于在页面上展示动态的文本或嵌套的组件。用法示例说明放变量h1{userName}/h1直接渲染变量值放表达式p{100 50}/p先计算表达式再渲染结果放函数调用span{getFullName()}/span渲染函数的返回值放条件判断div{isLoggedIn ? 欢迎 : 请登录}/div使用三元运算符或放数组列表渲染ul{list.map(item li{item.name}/li)}/ul遍历数组生成列表2. 放在标签属性中动态传值用于动态给组件或 HTML 标签传递属性除了字符串字面量其他都必须用大括号。动态绑定变量img src{userAvatar} /动态绑定布尔值button disabled{isSubmitting}提交/button动态绑定事件button onClick{handleClick}点击/button动态绑定对象内联样式div style{{ color: red }}文本/div注意这里是双大括号传递子组件Layout header{Header /} /3. 作为对象字面量的一部分当属性需要接收一个对象时外层{}表示这是 JS 代码内层{}表示这是一个 JS 对象。内联样式div style{{ fontSize: 16px, marginTop: 10px }} /传递复杂配置Chart data{{ labels: [A, B], values: [1, 2] }} /二、使用误区大括号里只能放能「算出一个结果」的表达式不能放用来控制流程的语句。❌ 不能放if...else{if (a b) return 大}错误❌ 不能放for/while循环{for(let i0; i10; i) {}}错误❌ 不能放变量声明var/let/const{const a 1}错误 三、大括号语法
1. 放在标签之间渲染内容用于在页面上展示动态的文本或嵌套的组件。用法示例说明放变量h1{userName}/h1直接渲染变量值放表达式p{100 50}/p先计算表达式再渲染结果放函数调用span{getFullName()}/span渲染函数的返回值放条件判断div{isLoggedIn ? 欢迎 : 请登录}/div使用三元运算符或放数组列表渲染ul{list.map(item li{item.name}/li)}/ul遍历数组生成列表2. 放在标签属性中动态传值用于动态给组件或 HTML 标签传递属性除了字符串字面量其他都必须用大括号。动态绑定变量img src{userAvatar} /动态绑定布尔值button disabled{isSubmitting}提交/button动态绑定事件button onClick{handleClick}点击/button动态绑定对象内联样式div style{{ color: red }}文本/div注意这里是双大括号传递子组件Layout header{Header /} /3. 作为对象字面量的一部分当属性需要接收一个对象时外层{}表示这是 JS 代码内层{}表示这是一个 JS 对象。内联样式div style{{ fontSize: 16px, marginTop: 10px }} /传递复杂配置Chart data{{ labels: [A, B], values: [1, 2] }} /二、使用误区大括号里只能放能「算出一个结果」的表达式不能放用来控制流程的语句。❌ 不能放if...else{if (a b) return 大}错误❌ 不能放for/while循环{for(let i0; i10; i) {}}错误❌ 不能放变量声明var/let/const{const a 1}错误