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

【问题标题】：Storing v-if conditional statement in an object in Vue.js在 Vue.js 的对象中存储 v-if 条件语句
【发布时间】：2018-09-17 04:13:33
【问题描述】：

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

例如，我有一个这样的代码，它输出一个带有按钮的表格行：

 <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不会这样识别？

【问题讨论】：

标签： arrays if-statement vue.js conditional

【解决方案1】：

我认为 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

希望不是多余的:)

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

条件语句可以这样动态存储吗添加了，还是 Vue 不会那样识别它？

我认为简短的回答是“不”。

因为当您将item.condition（它是一个字符串）传递给v-if 时，评估您的表达式（例如"price === 5"）的结果将被检查是否正确 -> 并且非空字符串始终为@ 987654326@。没有一些 eval 字符串的类似物。

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

【讨论】：

【解决方案2】：

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

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 的方法是指定对象中显示的约束并在方法中进行计算。

这里的优点是您的 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>

【讨论】：