In the first article, we introduced the basic usage of JSX in Vue 3. Now, let's dive into some advanced features and usage.
Conditional rendering
In JSX, you can use JavaScript conditional statements for conditional rendering. For example:
export default { setup() { const showButton = ref(true); return () => (
{showButton.value ? Visible Button : Button is hidden}
);
},
};
List rendering
You can also use the map function for list rendering:
export default { setup() { const items = ref([1, 2, 3]); return () => (
{items.value.map((item, index) => (
- {item}
))}
);
},
};
Event handling
In JSX, you can directly use native DOM events:
export default { setup() { const handleClick = () => { alert('Button clicked!'); }; return () => ( ); }, };
Custom component
You can use custom Vue components just like native HTML elements:
import MyComponent from './MyComponent.jsx' ;
export default { setup() { return () => ( ); }, };< /span>
Use v-model
In Vue 3, you can use the vModel attribute to simulate the behavior of v-model:
import { ref } from 'vue';
export default { setup() { const text = ref(''); return () => ( ); };
Summary
In this article, we explored the advanced usage of JSX in Vue 3, including conditional rendering, list rendering, event handling, etc. These advanced features make JSX a very powerful and flexible tool, especially when combined with Vue 3’s setup function.
In the next article, we will show you how to use these advanced features together through a comprehensive example. I hope this article helped you learn more about Vue 3 and JSX!