在第一篇文章中，我们介绍了 JSX 在 Vue 3 中的基础用法。现在，让我们深入了解一些高级特性和用法。
条件渲染
在 JSX 中，你可以使用 JavaScript 的条件语句进行条件渲染。例如：
export default {
setup() {
const showButton = ref(true);
return () => (
{showButton.value ? Visible Button : Button is hidden}
);
},
};
列表渲染
你也可以使用 map 函数进行列表渲染：
export default {
setup() {
const items = ref([1, 2, 3]);
return () => (
{items.value.map((item, index) => (
- {item}
))}
);
},
};
事件处理
在 JSX 中，你可以直接使用原生的 DOM 事件：
export default {
setup() {
const handleClick = () => {
alert(‘Button clicked!’);
};
return () => (
Click Me!
);
},
};
自定义组件
你可以像使用原生 HTML 元素一样使用自定义 Vue 组件：
import MyComponent from ‘./MyComponent.jsx’;
export default {
setup() {
return () => (
);
},
};
使用 v-model
在 Vue 3 中，你可以使用 vModel 属性来模拟 v-model 的行为：
import { ref } from ‘vue’;
export default {
setup() {
const text = ref(‘’);
return () => (
);
},
};
总结
在这篇文章中，我们探讨了 JSX 在 Vue 3 中的高级用法，包括条件渲染、列表渲染、事件处理等。这些高级特性使得 JSX 成为一个非常强大和灵活的工具，特别是在与 Vue 3 的 setup 函数结合使用时。
下一篇文章中，我们将通过一个综合示例来展示如何将这些高级特性结合起来使用。希望这篇文章能帮助你更深入地了解 Vue 3 和 JSX！