使用hasClass與vue.js

我知道這個設置我不是理想的，但我需要檢查一個輸入元素的類。我剛開始在一個新項目中使用Vue.js，但是我們有一個必須使用jQuery的表單驗證庫。使用hasClass與vue.js

我正在使用的驗證庫向輸入添加一個類，如果它不符合某些驗證要求。

如果我使用jQuery，我可以使用hasClass檢查輸入元素是否具有特定的類。

在Vue我不確定如何檢查一個元素是否有類。

這裏是希望我實現的實例方法：

 methods: { 
     nextStep: function() { 
      const element = this.$el.querySelector("#conversation__tram-1 input"); 
      if (element has the class of is-valid) { 
      Do something 
      } 

     }, 
     },

正如你可以看到，我想檢查輸入字段是否有一類is-valid。你能想出我能用Vue.js做到這一點的任何方式嗎？謝謝。

來源

2017-05-30 Nick Maddren

另一件你可以用來使這段代碼更類似Vue的元素是'ref'：https://vuejs.org/v2/api/#ref – wostex

您可以使用元素的classList property：

if (element.classList.contains('is-valid')) { 
    // Do something 
}

來源

2017-05-30 13:33:10 thanksd

如果你不需要IE9的支持，好的：https://caniuse.com/#search=classList –

是的，如果你確實需要'IE9'支持，你可以在我鏈接的頁面上使用Polyfill。 – thanksd

大部分本地vue.js功能涉及操作DOM，而不是DOM本身背後的數據。

有多種方法可以實現這一點，
您可以使用Vue類綁定，這是雙向的。所以你一旦你初始化了綁定，那麼你可以構建一個API來公開它。

你試過這個嗎？

if (this.$els.elementNameHere.className.match(/\bmyclass\b/)) { 
    // 
}

來源

2017-05-30 13:41:48

如果jQuery是已經參與，只需使用其hasClass你已經知道如何的方式。

nextStep: function() { 
     const element = this.$el.querySelector("#conversation__tram-1 input"); 
     if ($(element).hasClass('is-valid')) { 
     Do something 
     } 
    },

Vue沒有提供任何特殊的DOM操作例程，因爲在Vue中，您通常不應該操縱DOM。有一些例外，但這不是真正的例外。 :)混合jQuery和Vue的關鍵是你必須小心separate what jQuery controls from what Vue controls，這樣他們纔不會踩到彼此的腳趾。只要您不希望Vue更新它，只需簡單閱讀DOM就沒有太大的危害。

來源

2017-05-30 14:37:42

使用hasClass與vue.js

回答

相關問題