使用Vue切换不同元素

jm81lzqq  于 2023-05-18  发布在  Vue.js
关注(0)|答案(1)|浏览(154)

我是VueJS的新手,我正在努力学习它。
我已经做了一个非常简单的工具提示,它应该出现时点击,关闭时再次点击。只需一个工具提示,就可以很好地处理一些非常基本的(初学者)代码。

<div v-if="toolTipContent.length > 0" class="c-tooltip">
      <a @click="(clicked) ? clicked = false : clicked = true" class="c-tooltip--link">
          {{ $label('toolTipLink') }}
      </a>
      <div v-html="toolTipContent" v-if="clicked" class="c-tooltip--content"></div>
</div>

在JS中

export default {
  data() {
    return {
      clicked: false,
      toolTipContent: global.content,
    }
  }

但现在我想要多个工具提示。我可以粗糙的是一个完整的新手,只是复制上面的,并改变属性和值,但这没有意义。
所以我尝试了这样的事情:

<div v-if="toolTipContent.length > 0" class="c-tooltip">
  <a @click="toggleEl" class="c-tooltip--link">
    {{ $label('toolTipLink') }}
  </a>
  <div v-html="toolTipContent" v-show="clicked" class="c-tooltip--content"></div>
</div>

在JS中,与上面相同,加上:

methods: {
    toggleEl(e) {
      e.target.nextSibling.classList.toggle("show");
    }
  },

但我被困在这里了。我的意思是,我可以在下一个兄弟节点上切换一个类(就像我在上面所做的那样),但这感觉就像Vue中的jQuery-way。所以我想我必须使用clicked值,但如果我这样做,所有的工具提示都会显示(或隐藏)。我现在也在用v-show,而我觉得v-if应该更好。但是对于v-if,我不能将内容作为目标,因为它不是DOM的一部分。
解决这个问题的建议是什么?

zte4gxcn

zte4gxcn1#

最简单的方法是将所有的工具提示及其属性(点击、内容等)保存在Vue应用的data()部分。

<script>
...
data() {
  tooltips: [
    {
      content: content1,
      isClicked: false
    },
    {
      content: content2,
      isClicked: false
    }
  ]
},
...
</script>

现在,您可以轻松地在模板部件中渲染所有这些工具提示。

<div v-for="tooltip in tooltips" v-if="tooltip.content > 0" class="c-tooltip">
      <a @click="clickTooltip(tooltip)" class="c-tooltip--link">
          {{ $label('toolTipLink') }}
      </a>
      <div v-if="tooltip.clicked" class="c-tooltip--content">{{tooltip.content}}</div>
</div>

注意上面我们是如何以动态的方式使用tooltip作为“当前元素”的。
最后但同样重要的是,我们需要注意用于单击的clickTooltip方法。在脚本部分中将其分离到一个方法中会更加优雅和易读:

<script>
...
methods: {
  clickTooltip(tooltip) {
    tooltip = !tooltip
  } 
}
...
</script>

相关问题