Question

我有一个场景，我希望执行的表达式动态加载到组件中。我无法将表达式设置为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>

Answer 1

您可以为此创建方法，例如：

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

在组件配置中添加方法：

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

Answer 2

请注意，评估表达式要求您使用通常不是很好的JavaScript，例如eval和with。请注意确保您控制可以使用eval。

的任何内容

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

＆＃13;

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);
  }
});

＆＃13;

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

＆＃13;

Answer 3

整理一个我已经开放一年多的问题，我最终使用的答案是使用Angular Expression库Angular Expressions用于我的目的，但可能会转向使用{{3将来我的客户端和服务器将评估类似的表达式。

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

3 个答案: