VUE 控制element 控制面包屑显示与隐藏

<template>
  <div>
    <el-breadcrumb v-if="showBreadcrumb">
      <el-breadcrumb-item>Home</el-breadcrumb-item>
      <el-breadcrumb-item>Products</el-breadcrumb-item>
      <el-breadcrumb-item>iPhone</el-breadcrumb-item>
    </el-breadcrumb>
    <button @click="toggleBreadcrumb">Toggle Breadcrumb</button>
  </div>
</template>

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

使用v-show指令也可以实现相同的效果：

<template>
  <div>
    <el-breadcrumb v-show="showBreadcrumb">
      <el-breadcrumb-item>Home</el-breadcrumb-item>
      <el-breadcrumb-item>Products</el-breadcrumb-item>
      <el-breadcrumb-item>iPhone</el-breadcrumb-item>
    </el-breadcrumb>
    <button @click="toggleBreadcrumb">Toggle Breadcrumb</button>
  </div>
</template>

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

在这两种情况下，单击“Toggle Breadcrumb”按钮将切换面包屑的显示和隐藏状态。