Vue的class 和 style 的绑定语法

最新推荐文章于 2024-09-30 22:04:29 发布

叽叽咕咕呱呱

最新推荐文章于 2024-09-30 22:04:29 发布

阅读量234

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/twoyearTrainee/article/details/107318046

版权

class 和 style 的绑定语法

这两个其实是标签上面的属性，例如：

<p class='one two' style='color:red;'>this is a test</p>

既然是属性，那么我们就可以使用上午所学的特性的绑定方式，来将这两个值和 data 相关联。

但是，比较麻烦。所以 vue 对这两个属性专门做了增强，可以采用对象的和数组的方式来进行绑定。

class

对象语法：可以给class绑定一个对象，而非字符串。

代码示例如下：

<body>
    <div id="app">
        <p :class='abc'>this is a test</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                abc: {
                    one: true,
                    two: true,
                    three: false
                }
            }
        })
    </script>
</body>

也可以写作一个计算属性。示例：

<body>
    <div id="app">
        <p :class='abc'>this is a test</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            computed: {
                abc(){
                    return {
                        one : true,
                        two : false,
                        three : true
                    }
                }
            },
        })
    </script>
</body>

数组的语法：就是给 class 绑定一个数组。示例如下：

<body>
    <div id="app">
        <p :class='[a,b,c]'>this is a test</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data : {
                a : 'one',
                b : 'two',
                c : 'three'
            }
        })
    </script>
</body>

数组的写法比较灵活，甚至可以使用三目运算

<body>
    <div id="app">
        <p :class='[a ? b : c]'>this is a test</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data : {
                a : false,
                b : 'two',
                c : 'three'
            }
        })
    </script>
</body>

style

style 和 class 类似，也是提供了对象和数组的写法。

对象的写法，示例如下：

<body>
    <div id="app">
      	<!-- <p style="color: red; font-size: 32px;">this is a test</p> -->
        <p :style='style'>this is a test</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data : {
               style : {
                   color : 'red',
                   fontSize : '32px'
               }
            }
        })
    </script>
</body>

数组的写法，其实就是多个对象的数组，每个对象是一段样式设置。

<body>
    <div id="app">
        <p :style='[style1,style2]'>this is a test</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data : {
               style1 : {
                   color : 'red',
                   fontSize : '32px'
               },
               style2 : {
                   color : 'blue',
                   textDecoration : 'underline'
               }
            }
        })
    </script>
</body>