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

Posted wgchen~

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了14 vue的data函数中对象和数组的方式绑定模板样式相关的知识,希望对你有一定的参考价值。

场景

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

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

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

准备干净的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script src="https://unpkg.com/vue@next" ></script>
    <style>
        .redcolor:red;
        .greencolor:green;
        .background background-color: orange;
    </style>
</head>
<body>
<div id="app"></div>

<script>
    const app = Vue.createApp(
        data() 
            return 
                classString: 'red'
            
        ,
        template: `<h2 v-bind:class="classString"> hello </h2>`
    );
    const vm = app.mount("#app");
</script>
</body>
</html>

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

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

<style>
    .redcolor:red;
    .greencolor:green;
    .background background-color: orange;
</style>

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

template:`<h2 class="red">willem</h2>`

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

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

声明data变量:

data()
    return 
        classString:'red',
    
,

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

<h2 v-bind:class="red">willem</h2>
<h2 :class="red">willem</h2>

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

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

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

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

vm.$data.classString='green'

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

对象的绑定方式

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

比如这样的代码:

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

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

然后进行绑定:

template:`<h2 :class="classObject">willem</h2>`

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script src="https://unpkg.com/vue@next" ></script>
    <style>
        .redcolor:red;
        .greencolor:green;
        .background background-color: orange;
    </style>
</head>
<body>
<div id="app"></div>

<script>
    const app = Vue.createApp(
        data() 
            return 
                classString: 'red',
                classObject:red:true,background:true
            
        ,
        template: `<h2 v-bind:class="classObject"> hello </h2>`
    );
    const vm = app.mount("#app");
</script>
</body>
</html>

数组的绑定方式

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

代码如下:

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

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

template:`<h2 :class="classArray">willem</h2>`

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <script src="https://unpkg.com/vue@next" ></script>
    <style>
        .redcolor:red !important;
        .greencolor:green;
        .background background-color: orange;
    </style>
</head>
<body>
<div id="app"></div>

<script>
    const app = Vue.createApp(
        data() 
            return 
                classString: 'red',
                classObject:red:true,background:true,
                classArray:['green','background',red:true],
            
        ,
        template: `<h2 v-bind:class="classArray"> hello </h2>`
    );
    const vm = app.mount("#app");
</script>
</body>
</html>

以上是关于14 vue的data函数中对象和数组的方式绑定模板样式的主要内容,如果未能解决你的问题,请参考以下文章

vue 关于数组和对象的更新

vue 关于数组和对象的更新

Vue的双向绑定原理

vue实现CheckBox与数组对象绑定

4.Vue学习:data对象和for循环src路径绑定

vue学习