操作样式

2024-01-25 13:05:10

1、控制标签style样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-size: 14px;
        }

        table, tr, th, td {
            border: 1px solid red;
            border-collapse: collapse; /* 合并边框 */
        }

        th, td {
            width: 200px;
            text-align: center; /* 文本水平居中 */
            height: 30px;
            line-height: 30px;
        }

        input {
            width: 80px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
</head>
<body>

<div id="app">
<!--    格式1：值是json对象，对象写在元素的:style属性中-->
    <div class="c1" :style="{color: activeColor, fontSize: activeSize + 'px' }">yuan</div>
<!--格式2：值是对象变量名，对象在data中进行声明-->
    <div class="c1" :style="styObj">yuan</div>
<!-- 值是数组-->
    <div class="c1" :style="[styObj1, styObj2]">yuan</div>
</div>
<script>
    const vm = new Vue({
        el: "#app",
        data() {
            return {
             activeColor: 'red',
             activeSize: 30,
             styObj:{
                 color: 'blue',
                 fontSize: "30px",
             },

             styObj1:{
                 color: 'green',
                 fontSize: "30px",
             },
             styObj2:{
                backgroundColor:"lightgray"
             },

            }
        },

    })
</script>

</body>
</html>

2、控制标签的class类名

操作样式，本质就是属性操作，使用冒号：

格式：
   <h1 :class="值">元素</h1>  值可以是字符串、对象、对象名、数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <style>
        .c1 {
            color: red;
            border: 1px solid #000;
        }

        .c2 {
            background-color: orange;
            font-size: 32px;
        }

        .c3 {
            color: white;
            background-color: rebeccapurple;
        }

        .c4 {
            font-size: 30px;
            color: green;
        }

        .c5 {
            border: 1px solid darkred;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="box1">
        <!--- 添加class类名，值是一个对象
            {
             class类1:布尔值变量1,
             class类2:布尔值变量2,
            }
        -->
        <p :class="{c1:hasC1}">一个段落</p>
        <p @click="hasC3=!hasC3" :class="{c2:hasC2,c3:hasC3}">一个段落</p>
    </div>


    <div class="box2">
        <!-- 上面的代码可以:class的值保存到data里面的一个变量，然后使用该变量作为:class的值 -->
        <p :class="myCls">第二个段落</p>
    </div>

    <div class="box3">

        <!-- 批量给元素增加多个class样式类 -->
        <p :class="[myCls1,myCls2]">第三个段落</p>
    </div>

</div>
<script>
    let vm1 = new Vue({
        el: "#app",
        data: {
            hasC1: true, // 布尔值变量如果是false，则不会添加对象的属性名作为样式
            hasC2: true,  // 布尔值变量如果是true，则不会添加对象的属性名作为样式
            hasC3: false,
            myCls: {
                c4: true,
                c5: true
            },
            myCls1: {
                c4: true
            },
            myCls2: {
                c5: true
            },
        },
    })
</script>


</body>
</html>

3、示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        * {
            margin: 0;
            padding: 0;
        }

        .tab {
            width: 800px;
            height: 300px;
            /*border: 1px solid rebeccapurple;*/
            margin: 200px auto;
        }

        .tab ul {
            list-style: none;
        }

        .tab ul li {
            display: inline-block;
        }

        .tab_title {
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-bottom: 1px solid #e4393c;
        }

        .tab .tab_title li {
            padding: 10px 25px;
            font-size: 14px;
        }

        .tab .tab_title li.current {
            background-color: #e4393c;
            color: #fff;
            cursor: default;
        }

        .tab_con li.hide {
            display: none;
        }

    </style>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
</head>
<body>

<div class="tab">
    <ul class="tab_title">
        <li @click="tab(0)" :class="{current:TabNum==0}">商品介绍</li>
        <li @click="tab(1)" :class="{current:TabNum==1}">规格与包装</li>
        <li @click="tab(2)" :class="{current:TabNum==2}">售后保障</li>
        <li @click="tab(3)" :class="{current:TabNum==3}">商品评论</li>
    </ul>

    <ul class="tab_con">
        <li :class="{hide:TabNum!=0}">商品介绍...</li>
        <li :class="{hide:TabNum!=1}">规格与包装...</li>
        <li :class="{hide:TabNum!=2}">售后保障...</li>
        <li :class="{hide:TabNum!=3}">商品评论...</li>
    </ul>
</div>

<script>
    const vm = new Vue({
        el: ".tab",
        data() {
            return {
                TabNum:0
            }
        },
        methods: {
            tab(index){
                this.TabNum = index
            }
        }
    })
</script>

</body>
</html>

码农公寓

相关文章