嵌入JS表达式
语法: { js表达式 }
let content = '插入的内容'
let h1 = <h1>我是通过JSX创建的元素 {content}</h1>
描述:
1. 只要是合法的js表达式都可以进行嵌入
2.JSX自身就是JS表达式
注意: 语法是单花括号,不是Vue内双花括号
条件渲染
语法:
// 条件渲染
let islodata = false
一. if 渲染方式
const numtion = () => {
// 一. if
if (islodata) {
return <div>我是执行成功后的数据</div>
}
return <div>我是执行失败后的数据</div>
}
//二. 三元 渲染方式
const numtion = () => {
return islodata ? (
<div>我是执行成功后的数据</div>
) : (
<div>我是执行失败后的数据</div>
)
}
const title = <h1>{numtion()}</h1>
描述: 两种方式 if/else 和 三元运算符 来实现
条件渲染说明:
(9条消息) Vue02/ Vue入门、Vue指令、修饰符、事件参数、v-model表单元素_春暖花开.,的博客-CSDN博客https://blog.csdn.net/m0_64494670/article/details/127526365?spm=1001.2014.3001.5502
数组列表渲染
语法:
const obj = [
{ id: 1, name: '张三', age: 18 },
{ id: 2, name: '赵六', age: 26 },
{ id: 3, name: '刘东', age: 15 }
]
const vray = obj.map(item => {
return (
<p key={item.id}>
我的名字是:{item.name}, 我是年龄是{item.age}
</p>
)
})
const title = <h1>{vray}</h1>
描述:
注意:
1.渲染列表时需要添加 key 属性 , key属性的值要保证唯一的
2. 尽量避免使用索引号作为 key
key值详细说明: (9条消息) Vue03/Vue指令、v-for的key说明、Vue 就地复用策略_vue就地复用_春暖花开.,的博客-CSDN博客https://blog.csdn.net/m0_64494670/article/details/127567184?spm=1001.2014.3001.5502
样式处理
(1)行内样式 - style
语法:
<li key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>
{item.name}
</li>
在style内通过对象的方式传递数据
(2)类名 - className
// css文件
.container {
text-align: center
}
//js文件
import './css/index.css'
<li className='container' key={item.id} style={
{'color': 'red',"backgroundColor": 'pink'}}>
{item.name}
</li>