以編程方式創建綁定表達式

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而不是這種方法;它似乎更適合（並且避免需要調用括號）。

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>