OverVue.dev

# Class & Style Binding

# Class Binding

# Class Binding Basic

# Input:



 
 
 






 






 
 
 



<template>
  <div>
    <button @click="active = !active" :class="{ coolBorder: active }">
      Click to change button background color
    </button>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      active: false
    }
  }
}
</script>

<style scoped>
.coolBorder {
  background-color: white;
  color: black;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# Output:

# Class Binding Using Objects

# Input:




 
 
 






 



 
 
 
 
 
 





 
 
 
 
 
 


<template>
  <div :class="divClasses">
    <!-- Bind Class with Objects -->
    <button @click="foo = !foo">
      Make another element change
    </button>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      foo: false
    }
  },
  computed: {
    divClasses: function() {
      return {
        cool: this.foo,
        active: this.foo
      }
    }
  }
}
</script>

<style scoped>
.cool {
  border: Solid 1px #00ff00;
}
.active {
  background-color: #00ff00;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# Output:

# Class Binding Using names

# Input:


 
 
 





 






 
 
 










<template>
  <div :class="BlinkClass">
    <input v-model="BlinkClass" type="text" placeholder="Type 'Blink'" />
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      BlinkClass: ''
    }
  }
}
</script>

<style scoped>
.Blink {
  animation: blinkingBackground 1s infinite;
}
@keyframes blinkingBackground {
  0% {
    background-color: #00ff00;
  }
  100% {
    background-color: #1e1d45;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# Output:

# Style Binding

# Style Binding as Object

# Input:





 
 
 







 



















<template>
  <div>
    <button @click="loading++" type="button">Click Me!</button>
    <div class="loading">
      <div class="loadingbar" :style="{ width: loading + '%' }">
        {{ loading < 100 ? loading : 100 }} %
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      loading: 67
    }
  }
}
</script>

<style scoped>
.loading {
  max-width: 100%;
}
.loadingbar {
  color: #1e1d45;
  max-width: inherit;
  background-color: rgba(0, 255, 0);
  text-align: center;
  height: 20px;
  box-shadow: rgba(0, 255, 0, 0.6) 0px 0px 7px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# Output:

67 %

# Style Binding with Computed Properties

# Input:





 
 
 







 



 
 
 
 
 


















<template>
  <div>
    <button @click="loading++" type="button">Click Me!</button>
    <div class="loading">
      <div class="loadingbar" :style="myStyle">
        {{ loading < 100 ? loading : 100 }} %
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      loading: 80
    }
  },
  computed: {
    myStyle: function() {
      return {
        width: this.loading + '%'
      }
    }
  }
}
</script>

<style scoped>
.loading {
  max-width: 100%;
}
.loadingbar {
  color: #1e1d45;
  max-width: inherit;
  background-color: rgba(0, 255, 0);
  text-align: center;
  height: 20px;
  box-shadow: rgba(0, 255, 0, 0.6) 0px 0px 7px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

# Output:

80 %
# See the official Vue.js doc

← Events / v-on →