chevron_left

Vue 2 实践教程

免费
第 2.2 回

教程文档

Vue 2 实践教程 - 条件渲染

2023年11月23日
Vue 2 实践教程

条件渲染

v-if

<template>
  <div>
    <h1 v-if="active">你猜这里显示了吗?</h1>

    <hr />

    <template v-if="active">
      <h2>如果有多个元素</h2>
      <p>外层可以使用template标签来包裹</p>
      <p>你学会了吗?</p>
    </template>

    <button @click="toggle">点这里</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: true,
    };
  },
  methods: {
    toggle() {
      this.active = !this.active;
    },
  },
};
</script>

![1.png](https://assets.clwy.cn...

课程介绍

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

目录

适合这样的人

新手