Vue動的付与class
2837 ワード
Vue動的付与class
Vue DOM要素のclass属性を操作する場合、以下の方法があります.
もっと素晴らしいその他のテクニカルブログは、asing 1 elife’s blog に移動してください.
一般的な付与方法の比較は、以下の data()のshow属性がtrueであればshow classを付与し、そうでなければ を付与しない
三項演算子の使用方法三木演算子を使用して追加する属性構文は、上記の方法と明らかな違いがあることに注意してください.
Vue DOM要素のclass属性を操作する場合、以下の方法があります.
もっと素晴らしい
一般的な付与方法の比較
:class="{show: show}"により、その要素がshowという名前のclassを有するか否かを決定することができる.
<div class="watch-mooc-panel" :class="{show: show}">div>
template>
<script type="text/ecmascript-6">
export default {
name: 'mooc',
data() {
return {
show: false
}
}
}
script>
<style scoped lang="stylus" rel="stylesheet/stylus">
.watch-mooc-panel
width 100%
height 100%
position absolute
transition background-color .3s
&.show
background-color #000000
style>三項演算子の使用方法
<div class="watch-mooc-panel" :class="show ? 'show' : 'hide'">div>
template>