Question

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

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

 <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>

但也许更多的Vue y 方法是指定对象中显示的约束，并以方法进行计算。

这里的优点是你的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 docs中有很好的描述：https://vuejs.org/v2/guide/list.html#Displaying-Filtered-Sorted-Results

希望它不会过量：）

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

条件语句可以像这样存储并动态存储加入，或者Vue不会那样认出来？

我认为简短的回答是＆＃34;否＆＃34;。

因为当您将item.condition（字符串）传递给v-if时，评估您的表达式的结果（例如"price === 5"）将会检查其真实性 - ＆gt;非空字符串始终为true。字符串没有一些eval类似物。

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

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

2 个答案: