<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>Vue js width based if else condition</h3> <div :style="{ width: dynamicWidth }" style="border:1px solid #333333">Font Awesome Icons</div> <p>width: {{dynamicWidth}}</p> <button @click="handleClick">Toggle Width</button> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { dynamicWidth: "100%", }; }, methods: { handleClick() { if (this.dynamicWidth === '100%') { this.dynamicWidth = "50%"; } else { this.dynamicWidth = "100%"; } }, }, }); </script> <style> #app { margin: 0 auto; width: 600px; text-align: center; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); padding: 20px; } </style> </body></html>