Vue-样式绑定

最新推荐文章于 2023-06-20 16:11:30 发布

H5_ljy

最新推荐文章于 2023-06-20 16:11:30 发布

阅读量143

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_56973906/article/details/126610710

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

Vue样式绑定

class绑定
style绑定

class绑定

使用 v-bind:class 属性来改变
语法：
1.变量型:class=“变量名” //这个变量名为下面data里面写的
2.对象型:class=“{class类名:布尔值}”//可以写多个类名,这里是用布尔值做判断,可以写表达式，值做布尔判断，如歌为true就获取到该类名，如果为false就没有该类名
3.数组型:class=“[变量名,“类名一”]” //可以写多个类名;数组里面变量直接写变量名,如果直接是类名则要加双引号。

实现动态切换 class。

    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.12/vue.js"></script>
    <style>
      /* 白天模式样式 */
     .baitian{
         background-color: aliceblue;
         color: black;
     }
     /* 黑夜模式样式 */
     .heiye{
        background-color: black;
         color: white;
     }
     .appclass{
         width: 300px;
         height: 300px;
         margin: 0 auto;
     }
     img{
         height: 200px;
         width: 200px;
     }
    </style>
</head>
<body>
    <div id="app" :class=["appclass",msg]>
    <button v-on:click="fn">点我切换{{str}}模式</button>
    <p>{{title}}</p>
    <img :src="myimg" alt="">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                title:"个人风格",
                msg: "baitian",
                img:"https://ts1.cn.mm.bing.net/th?id=OIP-C.1-wFaNNsH_OCBFvGCfloWgHaJ4&w=216&h=288&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2",
                img2:"https://ts3.cn.mm.bing.net/th?id=OIP-C.Zxtf2X2EddV-g7hKyBhilAHaQB&w=161&h=350&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2",
                flag:false,
                myimg: "https://ts1.cn.mm.bing.net/th?id=OIP-C.1-wFaNNsH_OCBFvGCfloWgHaJ4&w=216&h=288&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2",
                str:"黑夜",
            },
            methods:{
                fn(){
                    //利用开关思想实现点击切换
                    this.flag=!this.flag
                    if(this.flag){
                        this.msg="heiye"
                        this.myimg=this.img2,
                        this.str="白天"
                    }else{
                        this.msg="baitian"
                        this.myimg=this.img,
                        this.str="黑夜"
                    }
                }
            }
        })

请添加图片描述

style绑定

也可以使用 v-bind:style 或 :style 直接给 HTML 元素绑定样式，它也有对应的对象语法与数组语法。
1.对象写法：

:style="{display:k,color:'blue'}"  //对象中的属性名为style样式名,后面可写变量也可直接用引号写。

2.数组写法

:style="[box1,box2,{color:color,background:'gold'}]"
//数组中的变量为的类型为对象，内容跟对象写法一样,也可直接将对象写法写入进去

案例：点击显示下拉框

    <script src='https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js'></script>
</head>
<style>
    .div1 {
        width: 200px;
        cursor: pointer;
    }
</style>
<body>
    <div class="myH">
        <div class="div1" @click="fn">
            <p>点我展示下拉框</p>
        </div>
        <div :style="{display:a,backgroundColor:'aque'}" class="div1">
            <p>下拉框一</p>
            <p>下拉框一</p>
            <p>下拉框一</p>
            <p>下拉框一</p>
            <p>下拉框一</p>
        </div>

    </div>
    <script>
        var vue = new Vue({
            el: ".myH",
            data: {
                a: "none",
                flag: false
            },
            methods: {
                fn() {
                    this.flag = !this.flag
                    if (this.flag) {
                        this.a = "block"
                    } else {
                        this.a = "none"
                    }
                }
            }
        })
    </script>

点击显示下拉框

H5_ljy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue-样式绑定

2.对象型:class=“{class类名:布尔值}”//可以写多个类名,这里是用布尔值做判断,可以写表达式，值做布尔判断，如歌为true就获取到该类名，如果为false就没有该类名。3.数组型:class=“[变量名,“类名一”]” //可以写多个类名;数组里面变量直接写变量名,如果直接是类名则要加双引号。也可以使用 v-bind:style 或 :style 直接给 HTML 元素绑定样式，它也有对应的对象语法与数组语法。1.变量型:class=“变量名” //这个变量名为下面data里面写的。...
复制链接

扫一扫