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

Stack Overflow用户

提问于 2017-03-23 05:54:51

回答 3查看 1.2K关注 0票数 0

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

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-06-17 23:56:36

为了整理我一年多来一直没有回答的问题，我最后使用的答案是使用角表达式库角表达式，但将来可能会转向使用友好的表达语言库，因为我的客户端和服务器都将评估类似的表达式。

票数 0

Stack Overflow用户

发布于 2017-03-23 06:11:13

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

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

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

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

票数 1

Stack Overflow用户

发布于 2017-03-23 06:39:41

请注意，计算表达式需要使用通常不是很好的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>