Vue的样式绑定

目录

1、内联绑定

2、非内联绑定

3、使用计算属性返回样式对象

4、数组语法进行绑定,支持绑定多个,使用运算法、使用对象


 

        样式的绑定,使用v-bind:class,v-bind:style ,v-bind:class在

Vue.js内联样式绑定
Vue.js内联样式绑定

Vue的样式绑定_第1张图片

2、非内联绑定

        非内联绑定即将元素的class属性绑定的对象定义在data选项中



Vue.js非内联样式绑定
Vue.js非内联样式绑定

Vue的样式绑定_第2张图片

3、使用计算属性返回样式对象

        可以为元素的class属性绑定一个返回对象的计算属性

        



Vue.js计算属性样式绑定
Vue.js计算属性样式绑定

 Vue的样式绑定_第3张图片

4、数组语法进行绑定,支持绑定多个,使用运算法、使用对象



Vue.js数组语法进行样式绑定
Vue.js数组语法进行样式绑定

 Vue的样式绑定_第4张图片

你可能感兴趣的:(vue,前端)