How to change css width 50% to 100% using Vue-CodePudding

How can I change css width from 50% to 100 % when click the button see more detail here >>>

<template>
    <div id="theSpecial">Hello World Special</div>
    <button @click="changeWidth">Change width</button>
</template>

<script>
export default {
  data() {
    return {
      testBoolean: false,
    };
  },
  methods: {
    changeWidth() {
      this.testBoolean = true;
      //change width to 100%
    },
  },
};
</script>

CSS

#theSpecial {
  background-color: purple;
  color: white;
  width: 50%;
}

CodePudding user response：

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  v-bind:>

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

CodePudding user response：

<template>
  <div >
    <h1>{{ msg }}</h1>
    <div id="theSpecial" :>
      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;
}

CodePudding user response：

  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 :>Hello World Special</div>
    <button @click="changeWidth">Change width</button>