Question

想用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/

中可用

Answer 1

您是否有特定的原因想要使用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: ''
  }
});

使用v-if的动态vue模板

1 个答案: