Change the button color ?

I want to change my button color when it has a text "Show" and "Hide" both of different colors, Dynamically

<h5 v-show="isShow">Hey!</h5>
    <button @click="isShow = !isShow"  v-text="isShow ? 'Hide' : 'Show' " class="bg-purple-500 border boder-red-600 rounded-lg p-2 fixed" ></button>

kokoshneta

3 years ago

Best Answer

Level 27

This took literally two seconds of Googling to find: https://vuejs.org/guide/essentials/class-and-style.html

<h5 v-show="isShow">Hey!</h5>
    <button @click="isShow = !isShow"  v-text="isShow ? 'Hide' : 'Show' " class="border border-red-600 rounded-lg p-2 fixed" :class="{ 'bg-purple-500 border-red-600': isShow, 'bg-green-500 border-blue-600': !isShow }" ></button>

Shivamyadav

3 years ago

Level 20

@kokoshneta Even I Have finded it , just slipped from my mind... Anyway you tryed to help me out , great stuff, Takes your reward...😁👍

Please or to participate in this conversation.