在 Vue.js 中的对象中存储 v-if 条件语句

Question

是否可以将条件语句存储在对象中并动态添加进去？

例如，我有一段代码输出 table 行，其中有一个按钮：

 <tr v-for="item in items">
     <td><button v-if="item.display">{{item.name}}</button>
 </tr>

这是我要返回的数据

data() {
        return {
            items : [
                {
                    name : 'Item1',
                    display : 'price >= 5',
                },
                {
                    name : 'Item2',
                    display : 'price == 10',
                },
            ],
        }
    },

执行此操作时，逻辑不起作用。该按钮始终显示。

但是，如果我要为每个按钮手动输入该逻辑。它工作正常。例如，这有效：

<tr v-for="item in items">
     <td><button v-if="price >= 5">{{item.name}}</button>
 </tr>

所以，最后，我的问题是。条件语句可以这样存储并动态添加进去，还是 Vue 不会那样识别它？

Answer 1

从技术上讲，您可以将函数用作对象的属性并调用它们：

new Vue({
  el: '#app',
  data() {
    return {
      price: 5,
      items: [{
          name: 'Item1',
          display: (price) => price >= 5,
        },
        {
          name: 'Item2',
          display: (price) => price == 10,
        },
      ],
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  Type "10": <input v-model="price">
  <table>
    <tr v-for="item in items">
      <td><button v-if="item.display(price)">{{item.name}}</button>
    </tr>
  </table>
</div>

但也许更 Vuey 的方法是在对象中指定显示的约束并在 方法[=36= 中进行计算].

这里的优点是您的 items 数据显然是可序列化的（例如 JSON），而在上面的选项中情况并非如此：

new Vue({ el: '#app', data() { return { price: 5, items: [{ name: 'Item1', display: {op: 'ge', val: 5}, }, { name: 'Item2', display: {op: 'eq', val: 10}, }, ], } }, methods: { display(item) { switch(item.display.op) { case 'eq': return this.price == item.display.val; case 'gt': return this.price > item.display.val; case 'lt': return this.price < item.display.val; case 'ge': return this.price >= item.display.val; case 'le': return this.price <= item.display.val; default: return false; } } } })

<script src="https://unpkg.com/vue"></script> <div id="app"> Type "10": <input v-model="price"> <table> <tr v-for="item in items"> <td><button v-if="display(item)">{{item.name}}</button> </tr> </table> </div>

Answer 2

我认为 acdcjunior 为这个问题提供了一个很好的直接答案。如果问题完全是关于 Vue 的特定功能的技术问题，我不确定是否应该在这里添加一些内容。

但是，我只想注意，数据不是存储显示信息的好地方。更常见的情况是当您有自己的价格数据时：

data() {
    return {
      price: 5,

      items: [{
          name: 'Item1',
          price: 5,
        },
        {
          name: 'Item2',
          price: 10,
        },
      ],
    }
  }

最常见的情况是您只需要渲染项目的某些子集。该场景在 vue 文档中描述得很好：https://vuejs.org/v2/guide/list.html#Displaying-Filtered-Sorted-Results

希望不要过分:)

另外，回到你的问题本身：

Can the conditional statement be stored like that and dynamically added in, or will Vue not recognize it that way?

我认为简短的回答是 "No"。

因为当您将 item.condition（这是一个字符串）传递给 v-if 时，将检查表达式的计算结果（例如 "price === 5"）的真实性 - > 并且非空字符串始终为 true。没有一些 eval 字符串类似物。

但是当表达式是一个函数时（如 acdcjunior 的示例）其执行结果 将是应该检查的结果表达式。

在 Vue.js 中的对象中存储 v-if 条件语句

Storing v-if conditional statement in an object in Vue.js

arrays

conditional

if-statement

vue.js