Vue—绑定class样式

最新推荐文章于 2024-03-17 12:22:11 发布

原创最新推荐文章于 2024-03-17 12:22:11 发布 · 283 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #css

Vue学习专栏收录该内容

63 篇文章

订阅专栏

文章展示了在Vue.js中如何使用:class和:v-bind:style动态绑定元素的class和style属性，包括字符串、对象和数组的不同写法，并提供了相应的样例代码进行解释。通过改变组件的数据，可以实现元素样式的动态更新。

绑定样式：

1.class样式

写法:class="xxx"xxx可以是字符串、对象、数组。

字符串写法适用于：类名不确定，要动态获取。

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2.style样式

:style="{fontSize: xxx}"其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象。

<style>
            .basic{
                width: 400px;
                height: 100px;
                border: 1px solid black;
            }
            
            .happy{
                border: 4px solid red;;
                background-color: rgba(255, 255, 0, 0.644);
                background: linear-gradient(30deg,yellow,pink,orange,yellow);
            }
            .sad{
                border: 4px dashed rgb(2, 197, 2);
                background-color: gray;
            }
            .normal{
                background-color: skyblue;
            }
            .atguigu1{
                background-color: yellowgreen;
            }
            .atguigu2{
                font-size: 30px;
                text-shadow:2px 2px 10px red;
            }
            .atguigu3{
                border-radius: 20px;
            }
    </style>

<body>
    <div id="root">
        <!--绑定class样式--字符串写法。
            适用于样式的内容不确定，需要动态指定-->
        <!--绑定的样式正常写，变化的样式单独写-->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
        <!--绑定class样式--数组写法。
            适用于要绑定的样式名字不确定，个数不确定-->
        <!--个数不确定的写成数组形式-->
        <div class="basic" :class="classarr">{{name}}</div>
        <!--绑定class样式--对象写法。
            适用于要绑定的样式名字确定，个数确定,但是要动态决定用不用-->
        <div class="basic" :class="classObj">{{name}}</div>
        <!--绑定style样式--对象写法-->
        <div class="basic" :style="styleObj">{{name}}</div>
        <!--绑定style样式--数组写法-->
        <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
    </div>
</body>

<script>
    const vm=new Vue({
        el:'#root',
        data:{
          name:'Gui',
          mood:'normal',
          classarr:['atguigu1','atguigu2','atguigu3'],
          classObj:{
            atguigu1:false,
            atguigu2:false
          },
          styleObj:{
            fontSize:'40px',
            color:'red'
          },
          styleObj2:{
            backgroundColor:'orange'
          }
        },
        methods:{
            changeMood(){
               //this.mood='happy'
               const arr=['happy','sad','normal']
               this.mood=arr[Math.floor(Math.random()*3)]
            }
        }
    })
</script>