我有一个场景,我希望执行的表达式动态加载到组件中。我无法将表达式设置为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>
答案 0 :(得分:1)
您可以为此创建方法,例如:
<div v-if="testExpression"></div>
在组件配置中添加方法:
methods: {
testExpression() {
return eval(this.expression)
}
}
答案 1 :(得分:0)
请注意,评估表达式要求您使用通常不是很好的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);
}
});
&#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;
答案 2 :(得分:0)
整理一个我已经开放一年多的问题,我最终使用的答案是使用Angular Expression库Angular Expressions用于我的目的,但可能会转向使用{{3将来我的客户端和服务器将评估类似的表达式。