Vue样式绑定~非常详细哦

最新推荐文章于 2024-07-16 07:16:59 发布

weixin_46370867

最新推荐文章于 2024-07-16 07:16:59 发布

阅读量68

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_46370867/article/details/112974995

版权

Vue 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的样式绑定，包括class样式处理的对象语法和数组语法，以及style样式处理的对象语法和数组语法。通过实例展示了如何动态地根据数据改变元素的样式，包括class的切换和内联样式的更新。同时还探讨了样式绑定的一些语法细节，如类名的简化操作和保留默认class等。

摘要由CSDN通过智能技术生成

下面是对Vue样式绑定的整理，希望可以帮助到有需要的小伙伴~

文章目录

- - 样式绑定

样式绑定

class样式处理

对象语法

<div v-bind: class="{ active: isActive }"></div>

数组语法

<div v-bind: class="[activeclass, errorclass]"></div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式绑定2</title>
    <style>
        .active {
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }

        .error {
            background-color: orange;
        }


    </style>
</head>
<body>
    <div id="app">
        <!-- active的样式为 true 或 false -->
        <div v-bind:class="[activeClass,errorClass]">测试样式</div>
        <button v-on:click='handle'>切换</button>
    </div> 
    <script src="js/vue.js"></script>
    <script>
        // 样式绑定
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                activeClass: 'active',
                errorClass: 'error'
            },
            methods: {
                handle: function() {
                    // 控制isActive的值在true和false之间进行切换 添加active样式 或 不添加active样式
                    this.activeClass = '';
                    this.errorClass = '';
                }
            }
        })
    </script>
</body>
</html>

样式绑定语法细节

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式绑定语法细节</title>
    <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">
        <!-- active的样式为 true 或 false -->
        <div v-bind:class="[activeClass,errorClass,{test: isTest}]">测试样式</div>
        <div v-bind:class='arrClasses'>class绑定值得简化操作-数组</div>
        <div v-bind:class='objClasses'>class绑定值得简化操作-对象</div>
        <div class="base" v-bind:class="objClasses">默认class(base样式)</div>
        <!-- 默认的class样式base 和 objClasses样式 同时起作用 -->
        <button v-on:click='handle'>切换</button>
    </div> 
    <script src="js/vue.js"></script>
    <script>
        /*
            样式绑定相关语法细节：
            1. 对象绑定和数组绑定可以结合使用 test样式举例 [activeClass,errorClass,{test: isTest}]
            2. class绑定的值可以简化操作, 将类名放到一个数组里，绑定数据就可以了
            3. 会保留默认的class样式
        */ 
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                activeClass: 'active',
                errorClass: 'error',
                isTest: 'true',
                arrClasses: ['active','error'],
                objClasses: {
                    active: true,
                    error: true
                }
            },
            methods: {
                handle: function() {
                    // 控制isActive的值在true和false之间进行切换 添加active样式 或 不添加active样式
                    // this.activeClass = '';
                    // this.errorClass = '';
                    // this.isTest = false;

                    // 当点击切换得时候，会调用该方法，去掉objClasses中的error样式
                    this.objClasses.error = false;
                }
            }
        })
    </script>
</body>
</html>

style样式处理

对象语法

<div v-bind:style=" [ color: activecolor， fontsize: fontsize } "></div>

数组语法

<div v-bind: style=" [ basestyles,overridingstyles] "></div>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>style样式处理</title>
</head>
<body>
    <div id="app">
       <div v-bind:style = '{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
       <div v-bind:style='objStyles'></div>
       <!--  数组语法 -->
       <div v-bind:style='[objStyles,overrideStyles]'></div>
       <!-- 点击切换按钮后，会执行 切换按钮绑定的 -->
       <button v-on:click='handle'>切换</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        /*
            样式绑定之内联样式Style:
        */ 
        var vm = new Vue({
            // el：告诉vue把数据插入到哪个位置
            el: "#app",
            // data: 提供数据
            data: {
                borderStyle: '1px solid blue',
                widthStyle: '100px',
                heightStyle: '200px',
                // 对象语法
                objStyles: {
                    border: '1px solid green',
                    width: '200px',
                    height: '100px'
                },
                
                overrideStyles: {
                    border: '5px solid orange',
                    backgroundColor: 'blue'
                }
            },
            methods: {
               handle: function(){
                   this.heightStyle='100px';
                   this.objStyles.width = '100px'
               }
            }
        })
    </script>
</body>
</html>

end~
加油！！！

weixin_46370867

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue样式绑定~非常详细哦

下面是对Vue样式绑定的整理，希望可以帮助到有需要的小伙伴~文章目录样式绑定class样式处理样式绑定语法细节style样式处理样式绑定class样式处理对象语法<div v-bind: class="{ active: isActive }"></div>数组语法<div v-bind: class="[activeclass, errorclass]"></div><!DOCTYPE html><html
复制链接

扫一扫

专栏目录