Vue.js 条件渲染教程

条件渲染是前端开发中常见的需求，Vue.js 提供了多种方式来实现条件渲染。以下是一些关于 Vue.js 条件渲染的基础教程。

条件渲染基础

在 Vue.js 中，你可以使用 v-if、v-else-if 和 v-else 指令来实现条件渲染。

• v-if：当条件为真时，包含指令的元素会插入到 DOM 中；否则，元素会被移除。
• v-else-if：与 v-if 类似，但它需要紧跟在 v-if 或另一个 v-else-if 指令之后。
• v-else：当 v-if 和 v-else-if 都不匹配时，包含指令的元素会被插入到 DOM 中。

<div id="app">
  <h1 v-if="isUserLoggedIn">欢迎回来，{{ user.name }}</h1>
  <h1 v-else>请先登录</h1>
</div>

使用计算属性

有时候，你可能需要在模板中进行复杂的逻辑判断。这时，你可以使用计算属性来简化逻辑。

<div id="app">
  <h1>{{ message }}</h1>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    userLoggedIn: true,
    userName: '张三'
  },
  computed: {
    message() {
      return this.userLoggedIn ? `欢迎回来，${this.userName}` : '请先登录';
    }
  }
});
</script>

列表渲染

在 Vue.js 中，你可以使用 v-for 指令来渲染列表。

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: '苹果' },
      { id: 2, name: '香蕉' },
      { id: 3, name: '橘子' }
    ]
  }
});
</script>

跳转至其他页面

Vue.js 提供了路由功能，可以帮助你轻松实现页面跳转。

<template>
  <div>
    <router-link to="/community/vuejs_tutorials/installation">Vue.js 安装教程</router-link>
  </div>
</template>

<script>
export default {
  name: 'VueTutorialLink'
}
</script>