Question

是否可以使用VueJS和vanilla JS来折叠其中一个div？

我在具有标题和正文的单独卡片中有数据 - 我希望卡片的主体在单击标题时折叠/展开。

正在使用VueJS，我想暂时将JQuery排除在外，专注于vanilla JS。

请参阅此 fiddle ，了解它的外观示例。请记住，我完全了解不使用相同的ID用于多个元素 - 这是一个用于说明目的的快速演示。

<div class="section">
    <div class="title" @click="toggle"><span class="toggleIcon" id="toggleIcon">{{toggleIcon}}</span>Toggle This Section</div>
    <hr/>
    <div class="body" id="toggle">
        <img style="height:100px" src="https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg">
     </div>
</div>

我现在遇到的问题是我可以崩溃一个div，但不能解决个别div。

Answer 1

请记住，Vue.js是数据驱动的，因此DOM中的更改应反映基础数据更改。在您的情况下，您应该将卡片包装在一个组件中，这样他们就可以跟踪他们自己的状态，然后使用带有v-show的标记来显示和隐藏该部分：

Vue实例

Vue.component('card', {
  template: '#card',
  methods: {
    toggle() {
     this.showSection = !this.showSection
    }
  },
  data() {
    return {
      showSection: true, // Flag to show section
      imageUrl: 'https://cdn.vox-cdn.com/thumbor/Pkmq1nm3skO0-j693JTMd7RL0Zk=/0x0:2012x1341/1200x800/filters:focal(0x0:2012x1341)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg',
      toggleIcon: '+'
    }
  }
})

<强>标记

  <div class="section">
    <div class="title" v-on:click="toggle">
      <span class="toggleIcon" id="toggleIcon">{{toggleIcon}}</span> Toggle This Section
    </div>
    <hr/>
    <!-- BIND v-show to the showSection data property to reflect changes -->
    <div class="body" v-show="showSection">
      <img v-bind:src="imageUrl">
    </div>
  </div>

请注意，我没有触及DOM，我只是切换showSection标志，Vue正在为我更新DOM。

这是JSFiddle：https://jsfiddle.net/craig_h_411/j1wh75v9/1/

将不同的内容传递给卡

如果您想为每张卡传递不同的内容，可以使用slot：

<template id="card">
  <div class="section">
    <div class="title" v-on:click="toggle">
      <span class="toggleIcon" id="toggleIcon">{{toggleIcon}}</span> Toggle This Section
    </div>
    <hr/>
    <div class="body" v-show="showSection">
      <!-- Add slot details here -->
      <slot></slot>
    </div>
  </div>
</template>

插槽允许您从父级插入组件中的内容，因为我只使用一个插槽，我放置在组件标记之间的任何内容都会被注入我在我的组件中放置插槽标记的地方，所以：

<card>I'm a card</card>
<card> Im another card</card>

在这些示例中，卡片标签之间的消息将添加到插槽中。插槽在父作用域中编译，而不是在组件的作用域中编译，因此如果要使用数据属性，则它们必须在父级中可用，类似地，您无法从插槽数据访问组件中的数据属性和方法。

这是JSFiddle：https://jsfiddle.net/craig_h_411/ew1epg61/

Answer 2

这是另一种类似于@craig_h 的可折叠卡片（带插槽）：

let updateKey = "favourites.height(cm)" 
db.collection("users").doc("frank").updateData([
    updateKey: FieldValue.increment(Int64(10))])


//which results in
{
    name: "Frank",
    favorites: { food: "Pizza", color: "Blue", height(cm): "110" },
    age: 12
}

点击使用VueJS v-on点击折叠不同的div：点击和Vanilla JS

2 个答案:

将不同的内容传递给卡