Vue2.0学习笔记5：绑定样式

最新推荐文章于 2023-08-03 11:20:29 发布

窝窝头一块钱4.1个

最新推荐文章于 2023-08-03 11:20:29 发布

阅读量572

点赞数

分类专栏： vue2基础知识文章标签： vue.js 学习 javascript 前端

本文链接：https://blog.csdn.net/W__J__J/article/details/127533686

版权

vue2基础知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

目录

一、绑定class样式

1.字符串写法

2.数组写法

3.对象写法

二、style样式

1.对象写法

2.数组写法

一、绑定class样式

:class="xxx"                 //xxx可以是字符串、对象、数组

1.字符串写法

适用情况：样式的类名不确定，需要动态指定

使用方法：将class样式通过v-bind与data对象绑定，其形式是字符串。将来需要改变时，可以将Vue所管理的data对象中的对应class字符串改变，从而实现动态绑定class样式

使用示例：

下面的示例实现了点击按钮使得div所绑定的样式在数组中随机选择一个改变

<head>
    <meta charset="UTF-8">
    <title>xxx</title>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
        }
        .happy{
            border: 4px solid red;
            background: rgba(255,255,0,644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border: 4px solid green;
            background: rgba(28, 28, 22, 0.31);
        }
        .normal{
            background: rgba(0, 196, 255, 0.62);
        }
        .st1{
           background: #34da4a;
        }
        .st2{
            text-shadow: 2px 2px darkgray;
            font-size: 20px;
        }
        .st3{
            border-radius: 20px;
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
<!--    绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定-->
    <div class="basic" :class="a" @click="changeMood">{{name}}</div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'4399游戏',
            a:'normal'
        },
        methods:{
            changeMood(){
                const arr = ['happy','sad','normal']
                const index = Math.floor(Math.random()*3)
                this.a=arr[index]
            }
        }
    })

</script>
</body>

2.数组写法

适用情况：需要绑定的样式个数不确定，名字不确定

使用方法：将class样式“保存”在一个数组中，并将数组与data对象绑定。将来需要增加或者移除class样式时，可以使用Arr.shift(移除数组中第一个元素)或者Arr.push('xxx')(增加一个元素)，来达到想要的效果

使用示例：

下面的示例中，完善代码，可以通过向数组中移除或增添元素来使得绑定的class样式发生变化

<head>
    <meta charset="UTF-8">
    <title>xxx</title>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
        }
        .happy{
            border: 4px solid red;
            background: rgba(255,255,0,644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border: 4px solid green;
            background: rgba(28, 28, 22, 0.31);
        }
        .normal{
            background: rgba(0, 196, 255, 0.62);
        }
        .st1{
           background: #34da4a;
        }
        .st2{
            text-shadow: 2px 2px darkgray;
            font-size: 20px;
        }
        .st3{
            border-radius: 20px;
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <!--    绑定class样式--数组写法，适用于：要绑定的样式个数不确定，名字不确定-->
    <div class="basic" :class="classArr">{{name}}</div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'4399游戏',
            classArr:['st1','st2','st3']
        }
    })

</script>
</body>

3.对象写法

适用情况：要绑定的样式个数确定，名字确定，但需要动态决定是否要用

使用方法：通过将class样式“保存”在一个对象中，可以使它们变为true或者false状态来决定它们是否应用

使用示例：

在下面的例子中，修改st1、st2的true/false状态可以决定它们是否应用

<head>
    <meta charset="UTF-8">
    <title>xxx</title>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
        }
        .happy{
            border: 4px solid red;
            background: rgba(255,255,0,644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border: 4px solid green;
            background: rgba(28, 28, 22, 0.31);
        }
        .normal{
            background: rgba(0, 196, 255, 0.62);
        }
        .st1{
           background: #34da4a;
        }
        .st2{
            text-shadow: 2px 2px darkgray;
            font-size: 20px;
        }
        .st3{
            border-radius: 20px;
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <!--    绑定class样式--对象写法，适用于：要绑定的样式个数确定，名字确定，但需要动态决定是否要用-->
    <div class="basic" :class="classObj">{{name}}</div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'4399游戏',
            classObj:{
                st1:true,
                st2:true
            }
        }
    })

</script>
</body>

二、style样式

1.对象写法

style写法比较少用，一般使用class

使用方法：将style中的值封装成一个对象，保存在data中，在这个对象中设置style的具体参数。

:style="{fontSize:xxx}"     //其中xxx是动态值

在设置参数时，可以将style中的属性值看成对象的key，而属性的值则是value。例如：

<div class="basic" style="font-size:50px">{{name}}</div>

上面例子中，font-size可以看成key，50px可以看成value。

注意事项：在对象中设置style具体参数时，key的值不一定能写成和原来一样。需要注意key的值也不能随意编写。实际编写形式是，将原本形式中的“-”去掉，它前面的单词全部小写，后面的单词首字母大写，最后将它们连起来。如果没有“-”则不用修改。上面的font-size按照规则写则是fontSize。background则仍然是background。

使用示例：

<head>
    <meta charset="UTF-8">
    <title>xxx</title>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
        }
        .happy{
            border: 4px solid red;
            background: rgba(255,255,0,644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border: 4px solid green;
            background: rgba(28, 28, 22, 0.31);
        }
        .normal{
            background: rgba(0, 196, 255, 0.62);
        }
        .st1{
           background: #34da4a;
        }
        .st2{
            text-shadow: 2px 2px darkgray;
            font-size: 20px;
        }
        .st3{
            border-radius: 20px;
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--    绑定style样式--对象写法-->
    <div class="basic" :style="styleObj">{{name}}</div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'4399游戏'
            styleObj:{
                fontSize:'40px'
            }
        }
    })

</script>
</body>

2.数组写法

数组写法极其少用，建议当可以使用其他方法时不用这个。

使用方法：将动态对象保存子数组中使用

:style="[a,b]"                 //其中a，b是样式对象

它的注意事项和对象写法相同

使用示例：

<head>
    <meta charset="UTF-8">
    <title>xxx</title>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
        }
        .happy{
            border: 4px solid red;
            background: rgba(255,255,0,644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border: 4px solid green;
            background: rgba(28, 28, 22, 0.31);
        }
        .normal{
            background: rgba(0, 196, 255, 0.62);
        }
        .st1{
           background: #34da4a;
        }
        .st2{
            text-shadow: 2px 2px darkgray;
            font-size: 20px;
        }
        .st3{
            border-radius: 20px;
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!--    绑定style样式--数组写法-->
    <div class="basic" :style="styleArr">{{name}}</div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'4399游戏'
            styleArr:[
                {
                    background:'orange'
                }
            ]
        }
    })

</script>
</body>