通过属性绑定为元素设置class类样式

最新推荐文章于 2021-12-25 23:21:33 发布

原创最新推荐文章于 2021-12-25 23:21:33 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨Vue.js中动态应用样式的多种方法，包括直接使用数组和对象进行数据绑定，以及如何通过三元表达式和条件判断提高代码可读性和灵活性。适合前端开发者学习。

<div id="app">
        <!--直接传递一个数组  class需要用v-bind做数据绑定-->
       <!-- <h1 :class="['thin','red']">123456789</h1>-->

        <!--在数组中使用三元表达式-->
       <!-- <h1 :class="['thin','red',flag?'active':'']">123456789</h1>-->

        <!--用对象来代替三元表达式，提高代码的可读性-->
        <!--<h1 :class="['thin','red',{'active“:flag}]">123456789</h1>-->
        
        <h1 :class="classobj">123456789</h1>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true,
                classobj:{red:true,thin:true,active:false}
             },