[Vuejs]-How to change css width 50% to 100% using Vue

by

2👍

✅

You have to make some change on your code
First of all add this to your css

.theSpecial{width:50%}
.fullWidth{width:100%}

To toggle the full width modify the method

changeWidth() {
   this.testBoolean = !this.testBoolean;
   //this will toggle the width on every click
},

and then use this in your component template

<div class="theSpecial" v-bind:class="{fullWidth:testBoolean}">

N.B. change the id into class, beacuse id has more css specifity.
This will toggle the class full width accordly to the value of testBoolean.

This is your Sandbox

Here you can find documentation about class binding

👤Sfili_81

2👍

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div id="theSpecial" :class="{ 'full-width': testBoolean }">
      Hello World Special
    </div>
    <button @click="changeWidth">Change width</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      testBoolean: false,
    };
  },
  methods: {
    changeWidth() {
      this.testBoolean = true;
    },
  },
};
</script>
#theSpecial {
  background-color: purple;
  color: white;
  width: 50%;
}

#theSpecial.full-width {
  width: 100%;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
👤gagz

0👍

  data() {
    return {
      testBoolean: false,
    };
  },
  methods: {
    changeWidth() {
      this.testBoolean = !this.testBoolean;
      //change width to 100%
    },
  },
.theSpecial {
  background-color: purple;
  color: white;
  width: 50%;
}
.fullwidth {
 background-color: purple;
  color: white;
  width: 100%;
}
<div :class="(this.testBoolean === true)? 'fullwidth':'theSpecial'">Hello World Special</div>
    <button @click="changeWidth">Change width</button>
👤HanKBeatz

Leave a comment