Vue3 style binding
Vue.js Class
class and style are attributes of the HTML element, which is used to style the element, and we can use the v-bind to set style properties.
v-bind Dealing with class and style the expression can be an object or an array in addition to a string.
v-bind:class can be abbreviated as :class .
class property binding
We can do it for v-bind:class set an object to switch dynamically class :
Example 1
In the instance, the general isActive set to true shows a green one. div block, if set to false does not display:
<div:class="{ 'active': isActive }"></div>
The above examples div class the rendering result is:
<div class="active"></div>
We can also pass in more properties in the object to dynamically switch between multiple class .
In addition :class instructions can also be similar to ordinary class properties coexist.
Example 2
text-danger Class background color overrides the active class background color:
<divclass="static":class="{ 'active' : isActive, 'text-danger' :
hasError }"></div>
The above examples div class the rendering result is:
<div class="static text-danger"></div>
When the isActive or hasError changes, the class attribute value will also be updated accordingly. For example, if the value of active is true, the class list will become “static active text-danger”.
We can also bind an object in the data directly:
Example 3
text-danger Class background color overrides the active class background color:
<divid="app"><divclass="static":class="classObject"></div></div>
The rendering of instance 3 is the same as that of instance 2.
In addition, we can bind a computational property of the returned object here. This is a common and powerful model:
Example 4
data(){return{isActive:true,error:null}},computed:{classObject(){return{active:this.isActive&&
!this.error,'text-danger':this.error&&this.error.type==='fatal'}}}
Array syntax
We can pass an array to v-bind:class the example is as follows:
Example 5
<divclass="static":class="[activeClass, errorClass]"></div>
The above examples div class the rendering result is:
<div class="static active text-danger"></div>
We can also use ternary expressions to switch between the class :
Example 6
errorClass is always there. isActive for true add when activeClass class:
<divid="app"><divclass="static":class="[isActive ? activeClass : '',
errorClass]"></div></div>
The above examples div class the rendering result is:
<div class="static text-danger"></div>
Vue.js style (inline style)
We can do it in v-bind:style set the style directly, which can be abbreviated to :style :
Example 7
<divid="app"><div:style="{ color: activeColor, fontSize: fontSize + 'px'
}">Rookie Tutorial</div></div>
The above examples div style the rendering result is:
<div style="color: red; font-size: 30px;">Rookie Tutorial</div>
You can also bind directly to a style object to make the template clearer:
Example 8
<divid="app"><div:style="styleObject">Rookie Tutorial</div></div>
v-bind:style can use an array to apply multiple style objects to an element:
Example 9
<divid="app"><div:style="[baseStyles,
overridingStyles]">Rookie Tutorial</div></div>
Note: When using CSS attributes that require a specific prefix, such as transform and Vue.js , the v-bind:style will automatically detect and add the corresponding prefix.”.
Multiple value
Can be used for style in binding property provides an array of multiple values, often used to provide multiple prefixed values, such as:
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
Writing in this way only renders the last value in the array supported by the browser. In this example, if the browser supports a flexbox then itwill only render display: flex .
Used on the component class attribute
When you use on a custom component with a single root element class property, these class will be added to the element. Existing on this element class will not be overwritten.
Example 10
<divid="app"><runoobclass="classC classD"></runoob></div><script>//
Create a Vue application const app=Vue. createApp ({})//Define a name called
The new global component of runoob app.component('runoob', { template: '<h1class="classA
classB">I like runoob!</h1>' }) app.mount('#app')</script>
The above examples div class the rendering result is:
<h1 class="classA classB classC classD">I like runoob!</h1>
For with data binding class the same applies:
<my-component :class="{ active: isActive }"></my-component>
When isActive for true the HTML is rendered as:
<p class="active">Hi</p>
If your component has multiple root elements, you need to define which parts will receive this class. Can be used $attrs the component property does this:
Example 11
<divid="app"><runoobclass="classA"></runoob></div><script>const app =
Vue.createApp({}) app.component('runoob', { template:
\`<p:class="$attrs.class">I like
runoob!</p><span>This is a subcomponent</span>\` }) app.mount('#app')</script>
Note: template is a backquotation mark, not a single quotation mark.
The above examples div class the rendering result is:
<div id="app" data-v-app=""><p class="classA">I like runoob!</p><span>This is a subcomponent</span></div>
