Vue条件渲染

**Vue 条件渲染**

在 Vue 中，条件渲染是指根据某些条件（如布尔值、数字或字符串）来决定是否渲染某个组件或元素。这种技术可以帮助我们优化性能并提高应用的可维护性。

###1. v-if`v-if` 是 Vue 中最常用的条件渲染指令，它根据表达式的真假来决定是否渲染一个元素或组件。

html<template>
 <div>
 <p v-if="show">显示</p>
 <button @click="show = !show">切换</button>
 </div>
</template>

<script>
export default {
 data() {
 return {
 show: true,
 };
 },
};
</script>

` 元素，只有当 `show` 的值为真时才会显示该元素。

###2. v-else`v-else` 是 Vue 中用于条件渲染的另一个指令，它与 `v-if` 相反，根据表达式的假来决定是否渲染一个元素或组件。

html<template>
 <div>
 <p v-if="show">显示</p>
 <p v-else>不显示</p>
 </div>
</template>

<script>
export default {
 data() {
 return {
 show: true,
 };
 },
};
</script>

` 元素，只有当 `show` 的值为假时才会显示该元素。

###3. v-show`v-show` 是 Vue 中用于条件渲染的另一个指令，它根据表达式的真假来决定是否显示一个元素或组件，而不是直接删除它。

html<template>
 <div>
 <p v-show="show">显示</p>
 <button @click="show = !show">切换</button>
 </div>
</template>

<script>
export default {
 data() {
 return {
 show: true,
 };
 },
};
</script>

` 元素的显示和隐藏。

###4. v-if 和 v-else 的区别`v-if` 和 `v-else` 都是用于条件渲染的指令，但是它们有一个关键的区别：`v-if` 会根据表达式的真假来决定是否渲染一个元素或组件，而 `v-else` 则会根据表达式的假来决定是否渲染一个元素或组件。

html<template>
 <div>
 <p v-if="show">显示</p>
 <p v-else>不显示</p>
 </div>
</template>

<script>
export default {
 data() {
 return {
 show: false,
 };
 },
};
</script>

` 元素，只有当 `show` 的值为假时才会显示该元素。

###5. v-show 和 v-if 的区别`v-show` 和 `v-if` 都是用于条件渲染的指令，但是它们有一个关键的区别：`v-show` 会根据表达式的真假来决定是否显示一个元素或组件，而不是直接删除它；而 `v-if` 则会根据表达式的真假来决定是否渲染一个元素或组件。

html<template>
 <div>
 <p v-show="show">显示</p>
 <button @click="show = !show">切换</button>
 </div>
</template>

<script>
export default {
 data() {
 return {
 show: true,
 };
 },
};
</script>

` 元素的显示和隐藏。

###6. v-if 和 v-for 的区别`v-if` 和 `v-for` 都是用于条件渲染的指令，但是它们有一个关键的区别：`v-if` 会根据表达式的真假来决定是否渲染一个元素或组件；而 `v-for` 则会根据循环的次数来渲染多个元素或组件。

html<template>
 <div>
 <p v-if="show">显示</p>
 <ul v-for="(item, index) in list" :key="index">
 <li>{{ item }}</li>
 </ul>
 </div>
</template>

<script>
export default {
 data() {
 return {
 show: true,
 list: [1,2,3],
 };
 },
};
</script>

` 元素和多个 `

html<template>
 <div>
 <p v-show="show">显示</p>
 <ul v-for="(item, index) in list" :key="index">
 <li>{{ item }}</li>
 </ul>
 </div>
</template>

<script>
export default {
 data() {
 return {
 show: true,
 list: [1,2,3],
 };
 },
};
</script>