Vuejsで動的にCSSをスイッチ

Styleを動的に指定するのは割と簡単にできます。しかし、より複雑のCSSを使いたい、そして、Deep Selectorも使いたい場合、ちょっとした工夫が必要ですが、それでも簡単にできました。

//template
<div :class="getMyClass()" />

//methods
getMyClass: function() {
  if(condition1) {
    return 'class1'
  }
  return 'class2'
}

//style
<style scoped>
.class1 >>> xxx {
  ...
}

.class2 >>> yyy{
  ...
}
</sctyle>