使用v-if的动态vue模板
使用v-if的动态vue模板
提问于 2018-09-18 08:01:29
想用jquery测试一下vue。我在html中创建了两个模板，如下所示；
<div id="app">
<input type='text' id='test'>
<template v-if='s'>
<div>
A
</div>
</template>
<template v-if='t'>
<div>
B
</div>
</template>
</div>根据文本框中的输入值- 's‘或't'，我希望显示各自的模板- 'A’或'B‘。我的vue设置如下；
new Vue({
el: '#app',
data: {
s: null,
t : null
},
mounted: function() {
var self = this;
var value = $('#test').val('');
if(value==s) {
self.s = true;
self.t = null;
}
else if(value==t) {
self.s = null;
self.t = true;
}
else{
self.s = null;
self.t = null;
}
}}); 到目前为止我还没有运气。代码可以在https://jsfiddle.net/fairul82/5zp2d48w/25/中找到
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-18 08:37:19
你想使用jQuery有什么特别的原因吗？首先，您的mounted函数仅在组件挂载后才会执行。它不像一个观察者，你可以不断地监控一个值。除此之外，你想做的事情可以像这样简单地实现..
<div id="app">
<input type='text' id='test' v-model="input">
<template v-if="input == 's'">
<div>
A
</div>
</template>
<template v-if="input == 't'">
<div>
B
</div>
</template>
</div>然后..。
new Vue({
el: '#app',
data: {
input: ''
}
}); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52377152
复制相关文章
相似问题