温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue如何实现样式绑定

发布时间:2022-02-25 09:18:08 来源:亿速云 阅读:125 作者:小新 栏目:开发技术

小编给大家分享一下Vue如何实现样式绑定,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

    1. 样式绑定(class、style)

    1.1 绑定class

    固定的类名就正常的写,需要动态绑定的类名就v-bind去绑定它

    例如::class= "mood"

    下面举一些适用的场景:

    1.绑定class样式—字符串写法,适用于:样式的类名不确定,需要动态指定

    2.绑定class样式 — 数组写法使用的场景 :绑定的样式的个数不确定,名字也不确定

    3.绑定class样式 — 对象写法使用的场景:绑定的个数确定的,名字也确定,不确定的是用不用该类名

     <body>
        <style>
            .basic {
                width: 100px;
                height: 100px;
                border: 2px solid black;
            }
            .happy {
                width: 100px;
                height: 100px;
                border: 2px solid orange;
                background-color: palevioletred;
            }
            .sad {
                width: 100px;
                height: 100px;
                border: 2px solid black;
                background-color: silver;
            }
            .normal {
                width: 100px;
                height: 100px;
                border: 2px solid greenyellow;
                background-color: sandybrown;
            }
            .outline {
                border-radius: 20%;
            }
            .color {
                color: skyblue;
            }
            .size {
                font-family: '微软雅黑';
                font-size: 20px;
                font-weight: bold;
            }
        </style>
        <div id="root">
            <!-- 
                需求1 :点击div1 随机切换mood
                绑定class样式  ---  字符串写法
                1. 固定的class类名就正常写,需要动态指定的class类名就  :class="xxx"  写到这里面
                2. 使用的场景 : 样式的类名不确定,需要去动态指定
             -->
            <div class="div1 basic" :class="mood" @click="random">{{name}}</div>
    
            <!-- 
                需求2 : 点击div2 添加类,或者删除类
                绑定class样式  --- 数组写法
                1. 使用的场景 :绑定的样式的个数不确定,名字也不确定
                2. shift() :移除数组中第一个数据, push("xxx");在末尾添加一个新的数据
             -->
            <div class="div2 basic" :class="classArr" @click = "remove">{{name}}</div> 
    
            <!-- 注意点:在vue操作下 " " 里面的写的字符串是表达式," '' " 里面写的字符串就是值   -->
            <!-- <div class="div2 basic" :class="['outline','color','size']"></div> -->
    
            <!-- 
                需求3 :在outline和color之间进行切换
                绑定class样式  --- 对象写法
                使用的场景:绑定的个数确定的,名字也确定,不确定的是用不用该类名
             -->
             <div class="div3 basic" :class="classObj" @click="change">{{name}}</div>
        </div>
        <script>
            Vue.config.productionTip = false
            let vm = new Vue({
                el: '#root',
                data: {
                    name: "Hello,Vue!",
                    mood: "normal",
                    classArr:['outline','color','size'],
                    classObj:{
                        outline:true,
                        color:true
                    }
                },
                methods: {
                    random() {
                        let arr = ["happy", "sad", "normal"]
                        // Math.floor : 表示向下取整, Math.random():取值是0-1,1是取不到的
                        this.mood = arr[Math.floor(Math.random() * 3)]
                    },
                    remove(){
                        this.classArr.shift()
                    },
                    change(){
                       vm.classObj.color = !vm.classObj.color
                       vm.classObj.outline = !vm.classObj.outline
                    }
                }
            })
        </script>

    1.2 绑定style

    例如::style = "styleobj"

    <div id="root" :>
            Hello,{{name}}!
        </div>
        <script>
            Vue.config.productionTip = false
            let vm = new Vue({
                el: '#root',
                data: {
                    name:"Vue",
                    styleobj:{
                        fontSize: 50 + "px",
                        color: "red",
                        border:1+"px"+" "+"solid"+" "+"black"             
                    }
                }
            })
        </script>

    以上是“Vue如何实现样式绑定”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    vue
    AI