Vue | class样式绑定与style样式绑定

最新推荐文章于 2022-12-01 11:59:11 发布

胖者是谁

最新推荐文章于 2022-12-01 11:59:11 发布

阅读量807

点赞数 1

分类专栏： vue 文章标签： Vue.js class绑定 style绑定动态样式前端开发

本文链接：https://blog.csdn.net/m0_72383454/article/details/127021572

版权

vue 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

一、class样式绑定

我们来通过一个小案例来说明这个class样式绑定。

这里有一个盒子，我们暂且叫它小王，它和我们人一样，有很多情绪。比如：开心？悲伤？还有normal……

但在这些情绪之外，它还是它自己，有一个自己的基础样式。

我们来分别看一下这几个情绪吧~

     <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>

1.绑定class样式，字符串写法

首先呢，我有一个这样一个需要，当我们点击小王的时候，它可以有一个情绪的展示，比如happy?sad?normal?

    <div id="root">
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
    </div>

    <script>
       Vue.config.productionTip = false
       new Vue({
        el:'#root',
        data:{
            name:'尚硅谷',
            mood:'happy'
        },
        methods: {
            changeMood(){
               
            }
        },
       })
    </script>

我们可以看到，我们在原有的【class='basic'】后面又添加了一个【:class='mood'】，这个含义就是我们给class动态绑定了一个变量，这个变量有自己的值【happy】，并且在我们的data里。说了一大堆废话也就是想表达，VUE在解析我们的模板时，会把我们的【class='basic'】和【:class='mood'】结合到一起，变成【class='basic happy'】。

现在又有一个刁钻的要求了，我不想它的情绪固定死在那了，不是normar，就是happy，我想在点击它的时候，它的情绪是随机的，就如同一个女人，善变。

我也不想Po那么多代码在这凑字数了，随便讲一下原理吧。

我们给小王绑定了一个点击事件，这个事件就是会改变data.mood的值，因为是想情绪是随机的，所以我们可以把我们的心情全部放进一个数组，通过随机数来改变索引值，这样mood的值就是随机的了，小王也成功变成了一个善变的女人。

        methods: {
            changeMood(){
                const arr = ['normal','happy','sad']
                var index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        }

总结：绑定class样式，字符串写法。适用于样式类名不确定，需要动态决定

2.class样式，数组写法

懒得写了，要不？直接上代码！

<body>
    <script src="../js/vue.js"></script>
    <div id="root">
        <!-- 绑定class样式，字符串写法。适用于样式类名不确定，需要动态决定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
        <!-- 绑定class样式，数组写法。适用于样式类名不确定，个数也不确定 -->
        <div class="basic" :class="arrClass">{{name}}</div>
    </div>
    <script>
       Vue.config.productionTip = false
       new Vue({
        el:'#root',
        data:{
            name:'尚硅谷',
            mood:'happy',
            arrClass:['atguigu1','atguigu2','atguigu3']
        },
        methods: {
            changeMood(){
                const arr = ['normal','happy','sad']
                var index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        },
       })
    </script>
</body>

3.class样式绑定，对象写法

<body>
    <script src="../js/vue.js"></script>
    <div id="root">
        <!-- 绑定class样式，字符串写法。适用于样式类名不确定，需要动态决定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
        <!-- 绑定class样式，数组写法。适用于样式类名不确定，个数也不确定 -->
        <div class="basic" :class="arrClass">{{name}}</div>
        <!-- 绑定class样式，对象写法。适用于样式类名确定，个数确定。但要动态确定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div>
    </div>
    <script>
       Vue.config.productionTip = false
       new Vue({
        el:'#root',
        data:{
            name:'尚硅谷',
            mood:'happy',
            arrClass:['atguigu1','atguigu2','atguigu3'],
            classObj:{
                atguigu1:false,
                atguigu2:false
            }
        },
        methods: {
            changeMood(){
                const arr = ['normal','happy','sad']
                var index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        },
       })
    </script>
</body>

大概就是可以通过操作atguigu1或者atguigu2的true Or false来控制小王是否有这个属性。

二、 style样式绑定

其中呢，这种样式绑定平时用到的不多，我们就随便讲一下。

<body>
    <script src="../js/vue.js"></script>
    <div id="root">
        <!-- 绑定class样式，字符串写法。适用于样式类名不确定，需要动态决定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
        <!-- 绑定class样式，数组写法。适用于样式类名不确定，个数也不确定 -->
        <div class="basic" :class="arrClass">{{name}}</div>
        <!-- 绑定class样式，对象写法。适用于样式类名确定，个数确定。但要动态确定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div>
        <!-- 绑定style样式，对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div>
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>
    <script>
       Vue.config.productionTip = false
       new Vue({
        el:'#root',
        data:{
            name:'尚硅谷',
            mood:'happy',
            arrClass:['atguigu1','atguigu2','atguigu3'],
            classObj:{
                atguigu1:false,
                atguigu2:false
            },
            styleObj:{
                fontSize:'28px',
                color:'red'
            },
            styleArr:[
                {
                    fontSize:'28px',
                    color:'red'
                },
                {
                    backgroundColor:'orange'
                }
            ]
        },
        methods: {
            changeMood(){
                const arr = ['normal','happy','sad']
                var index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        },
       })
    </script>
</body>

其中需要注意的点就是，属性名要用驼峰命名法，不然不生效。

啊这啊这，越来越懒的小王，今天就说到这里啦~

拜比！