以编程方式创建绑定表达式答案

【问题标题】：Programmatically create binding expression以编程方式创建绑定表达式
【发布时间】：2018-06-18 15:56:36
【问题描述】：

我有一个场景，我希望执行的表达式被动态加载到组件中。我无法将表达式设置为 v-if，因为它是文字字符串，而不是实际的绑定表达式。

我看过使用 vm.$watch 但是表达式只能是点符号路径，而不是单个 javascript 表达式。

vm.$watch 用法：观察 Vue 实例上的表达式或计算函数的变化。使用新值和旧值调用回调。该表达式只接受简单的点分隔路径。对于更复杂的表达式，请改用函数。

我可以使用 vuejs 的某些部分来实现这一点吗？我假设v-if 指令等的绑定表达式最终是在给定上下文中被解析和评估的字符串，只是这些函数是否可用于组件？

希望下面的这个例子更全面地展示了我想要实现的目标：

<template>
    <div>
        <div v-if="expression"></div>
    </div>
</template>

<script>
  export default {
    name: 'mycomponent'
    data: function() {
      var1: 5,
      var2: 7,
      expression: null
    },
    created: function() {
      this.$http.get('...').then((response) => {
        // Sample response:
        // {
        //   'expression' : 'var1 > var2'
        // }
        // TODO: Not this!!
        this.expression= response.expression;
      });
    }
  }
</script>

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

你可以为此创建一个方法，例如：

<div v-if="testExpression"></div>

并在您的组件配置中添加方法：

methods: {
    testExpression() {
        return eval(this.expression)
    }
}

【讨论】：

感谢您的建议。我正在尝试（如下面的@roy-j 所述）避免使用 eval，因为它是 quote: Not General Good JavaScript。目前我决定使用link，它提供了一定程度的安全性（虽然不是防弹的，但我认为可能比 eval 有所改进）。

【解决方案2】：

请注意，评估表达式要求您使用不是一般好的 JavaScript，例如 eval 和 with。请注意确保您可以控制对eval 的任何使用的影响。

我建议使用computed 而不是一种方法；它似乎更合适（并且避免需要调用括号）。

new Vue({
  el: '#app',
  data: {
    var1: 5,
    var2: 7,
    expression: null
  },
  computed: {
    evaluatedExpression: function() {
      with(this) {
        try {
          return eval(expression);
        } catch (e) {
          console.warn('Eval', expression, e);
        }
      }
    }
  },
  created: function() {
    setTimeout(() => {
      this.expression = 'var1 < var2';
    }, 800);
    setTimeout(() => {
      this.expression = 'var1 > var2';
    }, 2500);
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<div id="app">
  {{expression}}, {{evaluatedExpression}}
  <div v-if="evaluatedExpression">
    Yep
  </div>
  <div v-else>
    Nope
  </div>
</div>

【讨论】：

非常感谢这个例子。正如@soju 的帖子所评论的那样，我试图避免使用 eval 来实现这一点，所以暂时使用link。

【解决方案3】：

整理一个我已经开放了一年多的问题，我最终使用的答案是使用 Angular 表达式库 Angular Expressions 来满足我的目的，但很可能会转向使用 Friendly Enough Expression Language 库未来，因为我的客户端和服务器都会评估类似的表达式。

【讨论】：