以编程方式创建绑定表达式
以编程方式创建绑定表达式
提问于 2017-03-23 13:54:51
我有一个场景，其中我希望执行的表达式被动态加载到组件中。我无法将表达式设置为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
Stack Overflow用户
回答已采纳
发布于 2018-06-18 07:56:36
Stack Overflow用户
发布于 2017-03-23 14:11:13
您可以为此创建一个方法，例如：
<div v-if="testExpression"></div>并在组件配置中添加方法：
methods: {
testExpression() {
return eval(this.expression)
}
}Stack Overflow用户
发布于 2017-03-23 14: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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42978124
复制相关文章
相似问题
腾讯云开发者
