vue2写jsx样式三元判断
时间: 2023-11-04 09:15:51 浏览: 102
Vue.js 技术交流培训材料.pdf
在Vue2中使用JSX语法时,可以使用三元判断来动态设置样式。
例如,假设有一个组件中有一个按钮,根据某个条件判断是否显示该按钮,同时根据另一个条件设置不同的样式,可以这样写:
```jsx
<button
style={{
display: showButton ? 'block' : 'none',
backgroundColor: isRed ? 'red' : 'blue'
}}
>
Click me
</button>
```
其中,`showButton` 和 `isRed` 都是在组件中定义的变量,根据实际情况来设置。
注意,样式需要使用双大括号 `{}` 包裹,因为在JSX中,样式是一个对象。而三元判断的语法和普通的JavaScript语法一样。
阅读全文