14 vue的data函数中对象和数组的方式绑定模板样式

场景

这篇文章我们主要学习Vue中的一些关于样式(style)的内容。

样式绑定的内容还是不少的，所以分两篇文章： 初识 进阶来讲述

首先我们要编写一个基本的最简单的页面。

准备干净的页面

DOCTYPE html>


    
    
    demo
    
    
        .red{color:red;}
        .green{color:green;}
        .background{ background-color: orange;}
    





    const app = Vue.createApp({
        data() {
            return {
                classString: 'red'
            }
        },
        template: ` hello `
    });
    const vm = app.mount("#app");

写两个最基本的样式 并引入到模板

在文件的下方，我们写三个最基本的样式red、green和background，代码分别如下:

    .red{color:red;}
    .green{color:green;}
    .background{ background-color: orange;}

引用样式,在Vue的模板中引用和普通的html的方法一样。 直接写class加上类名就可以了。

template:`willem`

这时候你可以考虑一个问题，如果你希望程序足够灵活，样式也是可以控制的，这样引入样式的方法就不行了。

你需要先在Data中声明变量，然后在模板template中进行绑定。

声明data变量:

data(){
    return {
        classString:'red',
    }
},

有了这个变量（或者叫做数据项）以后，就可以用bind的形式进行绑定。

willem
willem

绑定同样使用v-bind，你也可以使用简写:。

上面的两种形式都可以进行绑定。

这时候你可以到浏览器中查看一下效果，如果一切正常，此时应该还是红色的。

此时你可以利用浏览器的控制台，输入对应的代码，直接控制样式了。

vm.$data.classString='green'

Vue中用对象和数组的形式控制样式 对象的绑定方式

比如现在用对象的形式进行绑定样式，好处是一次可以绑定多个样式。

比如这样的代码：

data(){
    return {
        classString:'red',
        classObject:{red:true,background:true}
    }
},

值为true代表绑定，值为false代表不绑定这个样式。

然后进行绑定:

template:`willem`

这时候再到浏览器中查看效果，就会有两个样式被绑定了red和background。如果你这首把red改为false，那效果就是只有背景颜色，没有字体颜色了。

DOCTYPE html>


    
    
    demo
    
    
        .red{color:red;}
        .green{color:green;}
        .background{ background-color: orange;}
    





    const app = Vue.createApp({
        data() {
            return {
                classString: 'red',
                classObject:{red:true,background:true}
            }
        },
        template: ` hello `
    });
    const vm = app.mount("#app");

数组的绑定方式

再来看一下数组的绑定方式，数组也是可以绑定多个样式的。

代码如下:

data(){
    return {
        classString:'red',
        classObject:{red:true,background:true},
        classArray:['green','background'],
    }
},

这时候再修改一下绑定值,页面样式就变成了绿字，橙色的底啦。

template:`willem`

你也可以在这种数组的数据项中，再嵌套对象的形式。

classArray:['green','background',{red:true}],

如果看不到效果，可以在CSS样式中增加 !important，当然你也可以在浏览器的控制台查看。

DOCTYPE html>


    
    
    demo
    
    
        .red{color:red !important;}
        .green{color:green;}
        .background{ background-color: orange;}
    





    const app = Vue.createApp({
        data() {
            return {
                classString: 'red',
                classObject:{red:true,background:true},
                classArray:['green','background',{red:true}],
            }
        },
        template: ` hello `
    });
    const vm = app.mount("#app");