（8）样式绑定

最新推荐文章于 2024-06-03 17:48:06 发布

liuyang___

最新推荐文章于 2024-06-03 17:48:06 发布

阅读量75

点赞数

分类专栏： vue学习笔记文章标签： vue 前端

本文链接：https://blog.csdn.net/liuyang___/article/details/125129060

版权

vue学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、class样式处理

对象语法

数组语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.min.js"></script>
    <style>
        .active {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .error {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="{active:isActive,error:isError}">测试样式</div>
        <button v-on:click="handle">切换</button>
    </div>

<script>

    var vm = new Vue({
        el:'#app',
        data:{
            isActive:true,
            isError:true
        },
        methods:{
            handle:function(){
                //控制isActive的值在true和false之间进行切换
                this.isActive=!this.isActive;
                this.isError=!this.isError;
            }
        }
        })
</script>
</body>

</html>

通过v-bind绑定class属性，他的值通过对象的方式可以控制这个类名是否显示。

控制多个类名，就用逗号隔开，添加多个键值对。

数组语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.min.js"></script>
    <style>
        .active {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .error {
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="[activeClass,errorClass]">测试样式</div>
        <button v-on:click="handle">切换</button>
    </div>

<script>

    var vm = new Vue({
        el:'#app',
        data:{
            activeClass:'active',
            errorClass:'error'
        },
        methods:{
            handle:function(){
                this.activeClass='',
                this.errorClass = ''
            }
        }
        })
</script>
</body>

</html>

样式绑定相关语法细节：

1、对象绑定和数组绑定可以结合使用

2、class绑定的值可以简化操作

3、默认的class如何处理？默认的class会保留

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.min.js"></script>
    <style>
        .active {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }

        .error {
            background-color: orange;
        }
        .test {
            color: blue;
        }
        .base {
            font-size: 28px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="[activeClass,errorClass,{test:isTest}]">测试样式</div>
        <div v-bind:class="arrClasses"></div>
        <div v-bind:class="objClasses"></div>
        <div class="base" v-bind:class="objClasses"></div>
        <button v-on:click="handle">切换</button>
    </div>

    <script>
        //     样式绑定相关语法细节：

        // 1、对象绑定和数组绑定可以结合使用

        // 2、class绑定的值可以简化操作

        // 3、默认的class如何处理？默认的class会保留

        var vm = new Vue({
            el: '#app',
            data: {
                activeClass: 'active',
                errorClass: 'error',
                isTest:true,
                arrClasses:['active','error'],
                objClasses:{
                    active:true,
                    error:true
                }
            },
            methods: {
                handle: function () {
                    // this.isTest = false;
                    this.objClasses.error = false;
                }
            }
        })
    </script>
</body>

</html>

2、style样式处理

对象语法

数组语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="vue.min.js"></script>
</head>

<body>
    <div id="app">
        <div v-bind:style="{border:borderStyle,width:widthStyle,height:heightStyle}"></div>
        <div v-bind:style="objStyle" ></div>
        <div v-bind:style="[objStyle,overrideStyle]"></div>
        <button v-on:click="handle">切换</button>
    </div>

<script>

    var vm = new Vue({
        el:'#app',
        data:{
            borderStyle:'1px solid blue',
            widthStyle:'100px',
            heightStyle:'200px',
            objStyle:{
                border:'1px solid green',
                width:'200px',
                height:'100px'
            },
            overrideStyle:{
                border:'5px solid orange',
                backgroundColor:'blue'
            }
        },
        methods:{
            handle:function(){
                this.heightStyle = '100px';
                this.objStyle.width = '100px'
            }
        }
        })
</script>
</body>

</html>