V-bind动态绑定style的案例集合

目录

绑定对象

绑定数组

绑定函数

---

V-bind 动态绑定 Class 的案例集合-CSDN博客

绑定对象

---

        示例代码如下：

<!--html-->  
<p :style="{width:widthVal,height:heightVal,border:borderVal}">段落</p>  
<!--js-->  
data(){  
    return {  
        widthVal:'300px',  
        heightVal:'60px',  
        borderVal:'1px solid #ccc',  
    }  
} 

        分析：通过 v-bind 为 style 进行数据绑定。当绑定对象时，对象的属性即为 CSS 属性名，而属性值则是在 data 中定义的相应 CSS 属性值。

        也能够直接在元素上采用“:style”的形式来书写样式对象，上述代码等同