VueJS - 如何将指令应用于所有匹配的标签?

时间:2017-02-02 17:18:09

标签: javascript vuejs2 vue.js vuejs-directive

我想以编程方式将指令应用于所有input标记。其中两个原因是:

  1. 我不想通过我的应用中的所有输入来添加指令
  2. 如果我想在以后更改针对所有输入的指令,它会在一个地方。
  3. 这可能吗?我已经对docs进行了审核,但他们似乎没有提到以任何其他方式应用它,而不是直接将标记应用于元素。

    我目前的代码是这样的:

    <input type="text" class="form-control input-sm" id="price" v-model="model.doc.price" v-floating-label>
    

3 个答案:

答案 0 :(得分:1)

根据Evan You:

  

当您实例化/挂载根实例时,会发生Vue.js编译。

请参阅https://github.com/vuejs/Discussion/issues/77#issuecomment-60339440

我不认为你想做的事情是理智的:搜索和替换,在许多文本编辑器或IDE中开箱即用,对你解释的两个原因非常有帮助。

答案 1 :(得分:0)

您可以将该指令绑定到类似的条件

<input type="text" 
       class="form-control input-sm" 
       id="price" 
       v-model="model.doc.price" 
       :v-floating-label=(condition)>

如果condition == truev-model-float指令将应用于您的输入。

更新1 :除了您从一个地方控制条件外,从评论中,实施仍然是相同的。这样,您可以稍后将该条件设置为false来删除该指令。

答案 2 :(得分:0)

我似乎有一个脑死亡的时刻。我只需要一个input 组件。然后,我可以在那里更改我需要的内容,它将在使用输入组件的任何地方进行更新,而不是使用标准的html input标记,我将使用我的组件。

漫长的一天......

我自己回答了这个问题,而不是删除它,以防其他人在将来有同样的脑死亡时刻;)