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

时间:2017-03-23 13:54:52

标签: vue.js vuejs2

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

3 个答案:

答案 0 :(得分:1)

您可以为此创建方法,例如:

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

在组件配置中添加方法

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

答案 1 :(得分:0)

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

的任何内容

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

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

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