模版样式绑定2

这节课我们继续来学模版样式绑定，上节课我们学习了通过绑定class属性来添加样式，这节课我们就学习绑定行内样式。

准备工作

我们新建html文件然后复制基础代码，我们先来写一个基础的行内样式。

template: `<div :style="'color:red'">{{message}}</div>`

然后，我们模版中来使用v-bind这种方式来绑定style属性，我们来声明一个变量styleStr 值为‘color:red’。

data() {
      return {
        message: "hello world!",
        styleStr:"color:red"
      }
    },

然后绑定style属性

template: `<div :style="styleStr">{{message}}</div>`

打开浏览器看看效果。

多样式绑定

同样我们可以使用对象的方式来声明多个样式。但是注意在这里-横杠需要使用首字母大写来表示，就是驼峰命名法。

styleObj:{
   color:"red",
   backgroundColor:"orange"
}

不声明变量的写法

在绑定一些简单样式的时候，我们可以不声明变量来绑定，直接在行内来编写。

单条写法：

template: `<div :style="'color:red'">{{message}}</div>`

多条写法：

template: `<div :style="{color:'red',backgroundColor:'orange'}">{{message}}</div>`

这种写法其实和使用变量的方式是一样，比较是适合简短的样式绑定，这样写起来更佳简单省事，但是不能动态修改。

三元运算符动态控制样式

v-bind属性绑定它是支持三元运算符的，所以我们就可以通过三元运算符来控制简单的动态绑定。

template: `<div :style="isActive ? styleStr : styleObj">{{message}}</div>`

template: `<div :style="isActive?'color:red':'color:orange'">{{message}}</div>`