First, let's understand what Vue3's combined API is. Composition API is a way to build components in Vue3. It uses functional programming to organize code and make your components clearer, easier to understand and maintain. The setup() function is the core of the combined API. It is used to initialize components and return objects containing component data.
Now, let's see how to use conditional rendering and loop rendering in the setup() function. First of all, we need to know that in Vue3, both conditional rendering and loop rendering can be implemented through the template syntax of functional components. However, let's first look at how to use conditional rendering in the setup() function.
Suppose we have a component named Person, which has a name attribute, and we want to dynamically render different content based on the value of the name attribute. We can use conditional rendering to achieve this functionality. Here is a sample code:
<template>
<div>
<h1 v-if="isMale">{
{ name }}先生</h1>
<h1 v-else>{
{ name }}女士</h1>
</div>
</template>
<script>
import {
ref } from 'vue';
export default {
name: 'Person',
props: {
name: String,
isMale: Boolean,
},
setup(props) {
const name = ref(props.name);
const isMale = ref(props.isMale);
return {
name,
isMale,
};
},
};
</script>
In this example, we use the v-if directive for conditional rendering. If the value of the isMale attribute is true, Mr. { { name }} will be displayed, otherwise Ms. { { name }} will be displayed. We create reactive references via the ref() function in the setup() function and pass them to props in the template. Finally, we return the object containing the reactive reference.
Next, let's take a look at how to use loop rendering in the setup() function. Suppose we have a component called BookList, it has an array property called books, we want to render the title of each book in this array by loop. Here is a sample code:
<template>
<div>
<ul>
<li v-for="(book, index) in books" :key="index">
{
{ book.title }}
</li>
</ul>
</div>
</template>
<script>
import {
ref } from 'vue';
export default {
name: 'BookList',
props: {
books: {
type: Array,
required: true,
},
},
setup(props) {
const books = ref(props.books);
return {
books,
};
},
};
</script>
In this example, we use the v-for directive to perform loop rendering. We create a reactive reference to books via the ref() function and pass it to the props in the template. Then, use the v-for directive in the template to loop through and render the titles of each book in the books array. Note that we use the :key binding within the loop to specify a unique identifier for each element to ensure efficient rendering.
Here are a few additional code examples that demonstrate more scenarios using conditional rendering and loop rendering in Vue3's compositional API:
Conditional rendering example: rendering different content based on a boolean value
<template>
<div>
<span v-if="isVisible">可见</span>
<span v-else>不可见</span>
</div>
</template>
<script>
import {
ref } from 'vue';
export default {
name: 'ConditionallyRenderExample',
setup() {
const isVisible = ref(false);
return {
isVisible,
};
},
};
</script>
In this example, we selectively render different text content based on the value of isVisible. If isVisible is true, "visible" is displayed, otherwise "invisible" is displayed.
Loop rendering example: rendering a list
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">
{
{ item }}
</li>
</ul>
</div>
</template>
<script>
import {
ref } from 'vue';
export default {
name: 'RenderListExample',
props: {
items: {
type: Array,
required: true,
},
},
setup() {
const items = ref([]);
return {
items,
};
},
};
</script>
For this example, we use v-fora directive loop to render a list.
Now, you have learned the basic methods of using conditional rendering and loop rendering in Vue3's composition API. But, this is just the beginning! Vue3's composition API also provides many other powerful features, such as computed properties, methods, listeners, and more. You can learn more in-depth by consulting the official Vue3 documentation, and you can also refer to various online tutorials and sample codes to continuously improve your skills.
Remember, learning Vue3’s compositional API requires constant practice and experimentation. So, don’t be afraid to make mistakes, code with courage and try new features and techniques. I believe that as long as you persist in learning and exploring, you will be able to master Vue3's combined API and become a Vue3 master!