VueJS:检查属性是否具有来自其他属性的值

VueJS: Check if property has value from another property

本文关键字：属性 其他 检查 是否 VueJS      更新时间：2023-09-26

我目前正在学习Javascript（VueJS），并更新了我现有的一个Laravel应用程序。到目前为止效果还不错。尽管如此，我还是有一点遇到了麻烦：我有两个道具（例如prop1和prop2），如果prop1中的值也存在于prop2中，则我想以不同的方式呈现表中的条目，这意味着该值在prop2中的某个位置。看看这个示例代码：

<tr v-for="s in list">
    <td v-if="s.value1 is also present in prop2"><i class="fa fa-circle text-danger"></i></td>
    <td v-else><i class="fa fa-circle text-success"></i></td>
    <td>{{ s.value1 }}</td>
    <td>{{ s.value2 }}</td>
</tr>

有没有一种既好看又简短的"类似vue"的方法来做到这一点？

您可以使用.some运算符来检查另一个数组中是否存在值：

// Will return true if any items matches s.value1
prop2.some(function (item) {
    return item === s.value1
});

您可以将其作为方法或计算属性添加到Vue实例中，例如：

var app = new Vue({
    el: "#vue",
    data: {
      prop2: []
    },
    methods: {
      checkProp2: function(val) {
        return prop2.some(function (item) {
          return item === val;
        })
      }
    }
})

然后你可以做一些类似的事情：

<tr v-for="s in list">
    <td v-if="checkProp2(s.value1)"><i class="fa fa-circle text-danger"></i></td>
    <td v-else><i class="fa fa-circle text-success"></i></td>
    <td>{{ s.value1 }}</td>
    <td>{{ s.value2 }}</td>
</tr>

<td v-if="s.value1 === s.value2">
相关文章：