我是怎么学会vue的08:v-bind动态绑定style属性

白话前端

标签的style不写死,而是动态的绑定上去。

在组件化开发的时候常用。

分为两种绑定方式:对象语法和数组语法。对象语法就是把对象绑定给style,数组语法就是把数组绑定给style。

对象语法

<h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2>

对象是键值对的形式:键是属性名,值是属性的值,不是布尔值。值需要写到引号里面(字符串),不写引号的话则解析成变量名。变量定义在data里面,如下:

const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      finalSize: 100,
      finalColor: 'red',
    }
})

如果键值对比较长,也可以把键值对写到方法里面。

<h2 :style="getStyles()">{{message}}</h2>
const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      finalSize: 100,
      finalColor: 'red',
    },
    methods: {
      getStyles: function () {
        return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
      }
    }
  })

数组语法(不常用)

<h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      baseStyle: {backgroundColor: 'red'},
      baseStyle1: {fontSize: '100px'},
    }
})
阅读 884

100 声望
7 粉丝
0 条评论
100 声望
7 粉丝
文章目录
宣传栏