how do i make the css in the class dynamic-CodePudding

<div 
     <ArrowLeftIcon 
       
       aria-hidden="true" />

I want to make the width be dynamic when I click the arrow

CodePudding user response：

Define a property called narrow like:

<script>
  export default {
    data(){
      return {
        narrow:false   
      }
   }
  }
</script>

in template bind the class to the narrow property :


<div  :
     <ArrowLeftIcon 
       @click="narrow=!norrow"
       
       aria-hidden="true" />

CodePudding user response：

You can dynamically bind a js expression to the class property of any element:

<element : />

jsExpression can take many forms, for class:

In your case, you could use any of these syntaxes:

Note: in dynamic class binding, { [isNarrow ? 'w-8': 'w-72']: true } is shorthand for
{ 'w-8': isNarrow, 'w-72': !isNarrow }