Vue.js的核心学习笔记 - 第六章动态绑定Class以及CSS元素

最新推荐文章于 2024-04-11 07:48:05 发布

Marinda_Speed

最新推荐文章于 2024-04-11 07:48:05 发布

阅读量518

点赞数 1

分类专栏： Vue.js 文章标签： vue.js css 学习

本文链接：https://blog.csdn.net/qq_33638188/article/details/123058406

版权

Vue.js 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

Vue.js的核心学习笔记 - 第六章绑定Class以及Style

前言
动态类绑定
- 对象绑定(ObjectBind)
- 数组绑定(ArrayBind)
动态绑定CSS(BindCSS)
- 对象方式绑定CSS以及数组方式绑定CSS
结束语

前言

今天我们来学习一下怎么通过Vue动态绑定Class和CSS元素，今天我们主要用到v-bind方式进行绑定，以下转换为最简写法**:属性**

动态类绑定

v-bind:class(动态绑定类)

思考：我们在日常开发前端页面时，少不了跟类属性打交道，而在Vue中能够很灵活轻便的完成这项功能
写法：v-bind:class="动态属性" 简化：:class="动态属性"
我们以下介绍两种写法

数组绑定
对象绑定

对象绑定(ObjectBind)

demo:

<!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>Vue.js的核心学习笔记 - 第六章动态class绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        
    </style>
</head>
<body>
    
    <div id="app">

        <div class="vue_test">
            <div :class="{active: active,classStyle: bol}"></div>
        </div>
        <br />
        </div>
    </div>
</body>
<script type="text/javascript">

    var vue = new Vue({
        el: "#app",
        data:{
            bol: true,
            active: false,
            testActive:{
                demo: true,
                'demoTests': true
            },
            vueTestClass: "vueTestClass",
            vueFlag: "vueDemo"
            
        },
        computed:{
            classObject: function(){
                return{
                    objectVue: this.bol,
                    "demoObjects": this.active ? true : false
                }
            },
            DemoObject: function(){
                return{
                    demo: "demo"
                }
            }
        }
    })
</script>
</html>

上述代码是通过在vue实例的data新增了active属性和bol属性，在:class中些出{active: active}的意思是：前者是类名，后者是布尔类型，如果满足了，那么就新增这个类名给标签，如果没有则反之。

接下来我们看看数组绑定写法，代码跟上面同步。

数组绑定(ArrayBind)

demo：

<!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>Vue.js的核心学习笔记 - 第六章动态class绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        
    </style>
</head>
<body>
    
    <div id="app">

        <div class="vue_test">
            <div :class="{active: active,classStyle: bol}"></div>
            <div :class="[vueTestClass,vueFlag]"></div>
        </div>
        <br />
    </div>
</body>
<script type="text/javascript">

    var vue = new Vue({
        el: "#app",
        data:{
            bol: true,
            active: false,
            testActive:{
                demo: true,
                'demoTests': true
            },
            vueTestClass: "vueTestClass",
            vueFlag: "vueDemo"
            
        },
        computed:{
            classObject: function(){
                return{
                    objectVue: this.bol,
                    "demoObjects": this.active ? true : false
                }
            },
            DemoObject: function(){
                return{
                    demo: "demo"
                }
            }
        }
    })
</script>
</html>

数组绑定方式写法为：:class="[VueTestClass,VueFlag]"意思是：使用的vue实例中写出的两个相关参数，最终效果为该标签新增了两个动态类名

绑定讲完了，接下来我们来看看怎么给标签增加Bind CSS(绑定Css)

动态绑定CSS(BindCSS)

动态绑定CSS语法为：`v-bind:style=“动态属性”，接下来介绍跟上面一样的写法，对象和数组方式进行绑定

对象方式绑定CSS以及数组方式绑定CSS

demo:

<!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>Vue.js的核心学习笔记 - 第六章动态class绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        
    </style>
</head>
<body>
    
    <div id="app">

        <div class="vue_test">
            <div :class="{active: active,classStyle: bol}"></div>
            <div :class="testActive"></div>
            <div :class="classObject"></div>
            <div :class="[vueTestClass,vueFlag]"></div>
            <div :class="[active ? vueTestClass : '',vueFlag]"></div>
            <div :class="[{active: bol},{demoActive: vueFlag}]"></div>
            <div :class="[DemoObject,{active: bol ? true : false}]"></div>
        </div>
        <br />
        <div class="vue_component">
            <index class="testComponent" :class="{active: bol}"> </index>
        </div>

        <div class="vue_style">
            <item :class="{active: bol}">

            </item>
            <!-- 多重值-->
            <div class="test">
                <div :style="{display: ['-webkit-box','flexbox','none']}"></div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    Vue.component('index',{
        template: `
        <div class = 'indexDemo'>
            <p :class='{active: active ? true : false}'>123</p>
         </div>
        `,
        data(){
            return{
                active: true
            }
        }
    })

    
    Vue.component('item',{
        template: `
        <div class = 'item'> 
            <p :style="objectStyle">测试ItemStyle模板</p>
            <p :style="{color: 'blue',fontSize: '18px',fontWeight: 'bold'}">用对象方式来内联Style</p>
            <p :style="[colorObject,fontSizeObject]">123123</p>
            <p :style="[arrayMethodsColor,arrayMethodsFont]">demo</p>
        </div>
        `,
        data(){
            return{
                //一个模板对象导入Style
                objectStyle:{
                    fontSize: "17px",
                    color: "red"
                },
                //数组方式
                colorObject:{
                    color: "orange"
                },
                fontSizeObject:{
                    fontSize: "19px"
                },
                arrayMethodsColor:{
                    color: "green",
                    background: "red",
                    width: "100%",
                    height: "50px"
                },
                arrayMethodsFont:{
                    fontSize: "20px",
                    fontWeight: "bold",
                    fontFamily: "宋体"
                }
            }
        }
    })


    var vue = new Vue({
        el: "#app",
        data:{
            bol: true,
            active: false,
            testActive:{
                demo: true,
                'demoTests': true
            },
            vueTestClass: "vueTestClass",
            vueFlag: "vueDemo"
            
        },
        computed:{
            classObject: function(){
                return{
                    objectVue: this.bol,
                    "demoObjects": this.active ? true : false
                }
            },
            DemoObject: function(){
                return{
                    demo: "demo"
                }
            }
        }
    })
</script>
</html>