有条件地将 <td> 数据包装在与 vue 的链接中答案

【问题标题】：conditionally wrap <td> data in a link with vue有条件地将 <td> 数据包装在与 vue 的链接中
【发布时间】：2021-08-17 18:08:03
【问题描述】：

我正在尝试查看某个表格单元格td 元素并设置一个条件，以便如果满足条件，我会在链接中显示数据，如果不满足，我只是将数据显示为文本

我似乎无法弄清楚如何做到这一点。我目前将鼠标悬停在该链接上，并且我已经在我的锚标记上设置了条件，但它根本不起作用。

我在下面有一个 sn-p，但基本上我希望看到 0 打印为触发悬停/弹出功能的链接。如果 test 设置为 1，我希望只看到打印的 1

我哪里错了？

<script>
new Vue({
  el: "#app",
  props: { 
    text: {
      type: String,
      required: true
    }
  },
  data: {
    timeout: null,
    showCard: false,
    isLoaded: false,
    selected: '',
    test: 0
  },
  methods: {

    mouseover: function (event) {
      console.log(event.pageX, event.pageY)
      clearTimeout(this.timeout)
      var self = this
      this.timeout = setTimeout(function () {
         self.showCard = true
         setTimeout(function () {
           self.isLoaded=true;
         }, 500)
      }, 500)
    },
    mouseleave: function () {
      var self = this
      this.timeout = setTimeout(function () {
        self.showCard = false
        self.isLoaded = false
      }, 200)
    },
    cardOver: function () {
      console.log('card over')
      clearTimeout(this.timeout);
      this.showCard = true
    },
    cardLeave: function () {
      var self = this
      this.timeout = setTimeout(function () {
        self.showCard = false
        self.isLoaded = false
      }, 200)
    }
  }
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<table id="app">
<tbody>
<td>
  <a v-if="test == 0" href="javascript:void(0)" 
         @mouseover="mouseover"
         @mouseleave="mouseleave">@{{test}}
            </a>
           <div id="hovercard" v-show="showCard" @mouseover="cardOver" @mouseleave="cardLeave">
      <div :class="['bg', {'loaded': isLoaded}]"></div>
      <div class="content">
        <p>Orders ready</p>
      </div>
    </div>
</td>
</tbody>
</table>

【问题讨论】：

var self = thiseww

标签： javascript html vue.js

【解决方案1】：

你考虑过

<a v-if="test == 0"
  href="javascript:void(0)" 
  @mouseover="mouseover"
  @mouseleave="mouseleave">{{test}}
</a>
<span v-else>{{test}}</span>

文档：Conditional rendering

【讨论】：

【解决方案2】：

有条件地将锚点包裹在内置的component 标签中。下面是示例 sn-p。

<td>
  <component :is="test == 0 ? 'a' : 'span'" @mouseover="mouseover" @mouseleave="mouseleave" :href="'javascript:void(0)' || ''" target="_blank">{{ test }}</component>
</td>

【讨论】：