时间戳

首页 > 解决方案 > 在 vue-cli 中切换隐藏/显示

javascript - 在 vue-cli 中切换隐藏/显示

问题描述

我有两个组件。第一个是带有图像的标题。第二个是带有列表的 div。我需要单击图像（在第一个组件中）以显示列表（第二个组件）并再次单击它以隐藏它。div 应该替换图像下方的所有内容（因此我可以再次单击图像以隐藏 div 并显示默认内容）。详情请看图片。链接到下面的代码。

图片

编码：

  1. 带有必须与 v-on 一起使用的图片的组件：单击 https://github.com/Mike-OxHuge/shop-on-vue-cli/blob/master/src/components/main-header.vue

  2. 当我单击组件 1 中的图片时应该出现/消失的组件 https://github.com/Mike-OxHuge/shop-on-vue-cli/blob/master/src/components/menu.vue

  3. 应该默认显示，但消失或被组件 2 覆盖的组件 https://github.com/Mike-OxHuge/shop-on-vue-cli/blob/master/src/components/main-page-content .vue

  4. App.vue https://github.com/Mike-OxHuge/shop-on-vue-cli/blob/master/src/App.vue

  5. 和 main.js https://github.com/Mike-OxHuge/shop-on-vue-cli/blob/master/src/main.js

标签： javascriptvue.jsvue-component

解决方案

您需要阅读 Vue 中的点击处理程序，并将 v-dom 绑定到数据变量。

这是一个例子：

JS：

var vue = new Vue({
  el:"#app",
  data: {
  isShowing:false,
  }
})

v-dom：

<div id="app">
   <iframe v-show="isShowing" src="http://www.weather.gov/" 
        frameborder="0"
        ></iframe>
  <button @click="isShowing ^= true">Click Me</button>
</div>

演示：https ://codepen.io/michael_coder/pen/WReNNm

推荐阅读