园龄：3年5个月粉丝：9 关注：0

第一章 Vue核心第十节绑定样式

绑定样式：
  1.class样式
      写法：class="xxx"  xxx可以是字符串、对象、数组。
          字符串写法适用于：类名不确定，要动态获取
          对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
          数组写法适用于：要绑定多个样式，个数确定，名字也确定，但是不确定用不用
  2.style样式
      :style="{fontSize:xxx}"  其中xxx是动态值。
      :style="[a,b]" 其中a、b是样式对象

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定样式</title>
    <style>
        .basic{
            margin: 20px auto;
            text-align: center;
            line-height: 100px;
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
        .happy{
            border: 4px solid red;
            background: rgba(255, 255, 0, 0.644) linear-gradient(30deg, yellow, pink, orange, yellow);
        }
        .sad{
            background: lightgray;
            border: 4px dashed green;
        }
        .normal{
            background: aqua;
        }
        .retrace1{
            font-size: 30px;
        }
        .retrace2{
            border-radius: 10px;
        }
        .retrace3{
            box-shadow: 0 0 1px 5px gray;
        }
    </style>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../../鼠标指针样式.css"/>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <!--绑定class样式--字符串写法，适用于：样式名不确定，需要动态指定-->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>

        <!--绑定class样式--数组写法，适用于：要绑定的样式的个数不确定，名字也不确定-->
        <div class="basic" :class="classArr">{{name}}</div>

        <!--绑定class样式--对象写法，适用于：要绑定的样式的个数确定、名字也确定，但要动态决定用不用-->
        <div class="basic" :class="classObj">{{name}}</div>

        <div class="basic" :style="{fontSize:'40px'}">{{name}}</div>
        <div class="basic" :style="styleObj">{{name}}</div>

        <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        const vm = new Vue({
            el:'#root',
            data:{
                name:'retrace',
                mood:'normal',
                classArr:['retrace1','retrace2','retrace3'],
                classObj:{
                    retrace1:false,
                    retrace2:true,
                    retrace3:false,
                },
                styleObj:{
                    fontSize:'40px',
                },
                styleObj2:{
                    backgroundColor:'red'
                },
                styleArr:[
                    {
                        fontSize:'40px',
                    },
                    {
                        backgroundColor:'red'
                    }
                ]
            },
            methods:{
                changeMood(){
                    const arr = ['happy','sad','normal'];
                    this.mood = arr[Math.floor(Math.random()*3)];
                    console.log(this.mood);
                }
            }
        });
    </script>
</body>
</html>

本文作者：何以之

本文链接：https://www.cnblogs.com/serendipity-echo/articles/15407947.html

posted @ 2021-10-14 18:27 何以之阅读(40) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

何以之

第一章 Vue核心第十节绑定样式

公告

常用链接

最新随笔

积分与排名

随笔分类 (10)

随笔档案 (15)

文章分类 (19)

文章档案 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

何以之

第一章 Vue核心 第十节 绑定样式

公告

常用链接

最新随笔

积分与排名

随笔分类 (10)

随笔档案 (15)

文章分类 (19)

文章档案 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

第一章 Vue核心第十节绑定样式