A. Change More Class on its dynamic value
<template>
<h3 :class="{colorChange:colorChangeJs}">Your Select Fruits Are: {{ Fruits }}</h3>
</template>
<script>
export default {
name: "HeaderComponent",
data() {
return {
Fruits : 'Without html tag',
tag : '<h1>With html tag</h1>',
colorChangeJs: true
}
}
}
</script>
<style scoped>
.colorChange{
background:red;
color:white;
}
.err{
color:red;
}
.other_class{
background-color:orange;
}
</style>
B. Change Class on button click
<template>
<h3 :class="{colorChange:colorChangeJs}">Your Select Fruits Are: {{ Fruits }}</h3>
<button type="button" v-on:click="colorChangeJs = !colorChangeJs">Change Color</button>
</template>
<script>
export default {
name: "HeaderComponent",
data() {
return {
Fruits : 'Without html tag',
tag : '<h1>With html tag</h1>',
colorChangeJs: true
}
}
}
</script>
<style scoped>
.colorChange{
background:red;
color:white;
}
.err{
color:red;
}
.other_class{
background-color:orange;
}
</style>
C. Add Class on button click
<template>
<h3 class="other_class" :class="{colorChange:colorChangeJs}">Your Select Fruits Are: {{ Fruits }}</h3>
<button type="button" v-on:click="colorChangeJs = !colorChangeJs">Change Color</button>
</template>
<script>
export default {
name: "HeaderComponent",
data() {
return {
Fruits : 'Without html tag',
tag : '<h1>With html tag</h1>',
colorChangeJs: true
}
}
}
</script>
<style scoped>
.colorChange{
background:red;
color:white;
}
.err{
color:red;
}
.other_class{
background-color:orange;
}
</style>
D. Add Class in form of object
<template>
<h3 class="other_class" :class="{colorChange:colorChangeJs, err:Err}">Your Select Fruits Are: {{ Fruits }}</h3>
<button type="button" v-on:click="colorChangeJs = !colorChangeJs">Change Color</button>
</template>
<script>
export default {
name: "HeaderComponent",
data() {
return {
Fruits : 'Without html tag',
tag : '<h1>With html tag</h1>',
colorChangeJs: true,
Err: true
}
}
}
</script>
<style scoped>
.colorChange{
background:red;
color:white;
}
.err{
color:red;
}
.other_class{
background-color:orange;
}
</style>
E. Add Lot Of Class in form of object By Using Function
<template>
<h3 class="other_class" :class="addClass">Your Select Fruits Are: {{ Fruits }}</h3>
<button type="button" v-on:click="colorChangeJs = !colorChangeJs">Change Color</button>
</template>
<script>
export default {
name: "HeaderComponent",
data() {
return {
Fruits : 'Without html tag',
tag : '<h1>With html tag</h1>',
colorChangeJs: true,
Err: true
}
},
computed: {
addClass() {
return{
colorChange: this.colorChangeJs,
err: this.Err
}
}
}
}
</script>
<style scoped>
.colorChange{
background:red;
color:white;
}
.err{
color:red;
}
.other_class{
background-color:orange;
}
</style>
