使用Vue切换不同元素

jm81lzqq 于 2023-05-18 发布在 Vue.js

关注(0)|答案(1)|浏览(155)

我是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的一部分。
解决这个问题的建议是什么？

vue.js

来源：https://stackoverflow.com/questions/76261483/toggle-different-elements-using-vue

1条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-05-18

我来回答

使用Vue切换不同元素

1条答案

相关问题

热门标签

最新问答