模版样式绑定1

今天我们来学习模版样式绑定，我们来新建一个html文件，老样子复制一下hello world基础代码。

通过class编写两个基本样式

在script下面编写一个 style 内部样式，随意写两个基本的样式。

<style>
  .red{
    color:red
  }
  .bg{
    background: orange;
  }
</style>

按照常规写法，我们在标签上使用class属性为它添加样式。

那么在vue中，我们还可以通过v-bind属性绑定来绑定样式，我们来添加一个变量这个变量我们就给它赋值为class名称“red”。

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

然后，我们在template中就可以使用v-bind来绑定了。

template: `<div v-bind:class="className">{{message}}</div>`

因为v-bind的是可以简写成: 所以我也可以写成：

template: `<div :class="className">{{message}}</div>`

动态绑定样式

既然我们使用一个变量来绑定了样式，那么我们通过修改这个变量值是不是就可以动态的来修改我们的样式呢？那肯定是可以的，我们来试一下。在控制台中来修改className。

vm.$data.className = "bg"

回车之后相信大家已经看到效果了。

多个样式绑定

1.对象的绑定方式

使用对象我们可以实现一次绑定多个样式,我们在声明一个变量，分别放入red、bg，key为我们class名称，值为true时表示使用，值为false时表示不使用。

    return {
        message: "hello world!",
        classObj: {red:true,bg:true},
        className:"red"
      }        

然后我们来为template绑定上对象。

    template: `<div v-bind:class="classObj">{{message}}</div>`        

到浏览器来看一下效果，这是时候red和bg的样式都被绑定上了。

然后我们来把red的值给它设置成false，然后到浏览器就发现red字体颜色已经不见了

2.数组的绑定方式

我们再来声明一个变量classArr。分别放入red和bg。

return {
        message: "hello world!",
        classObj:{red:true,bg:true},
        classArr:["red","bg"],
        className:"red"
      }

然后进行class绑定

 template: `<div v-bind:class="classArr">{{message}}</div>`

然后看一下效果，也是两个样式都被同时绑定上了。

我们还可以在数组中来嵌套对象，比如我们再去定一个样式叫“padding”。

 .padding{
    padding:10px
 }

然后把进行嵌套

classArr:["red","bg",{padding:true}],

然后在浏览器上看到了padding也被绑定上了。