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" :style="styleobj">
        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>

总结

本篇文章就到这里了,介绍了class和style如何绑定,希望能够给你带来帮助,也希望您能够多多关注阿兔在线工具的更多内容!    

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部