欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

VUE学习(五)-Class 与 Style 绑定

程序员文章站 2024-01-28 17:06:34
...

VUE学习(五)-Class 与 Style 绑定

    在应用界面中, 某个(些)元素的样式是变化的,class/style 绑定就是专门用来实现动态样式效果的技术

1 class  绑定

     (1):class='xxx'

     (2)表达式xxx是字符串: 'classA'

     (3)表达式xxx是对象: {classA:isA, classB: isB}

     (4)表达式xxx是数组: ['classA', 'classB']

2  style  绑定

     (1):style="{ color, fontSize}"

     (2):style="{ color: activeColor, fontSize: fontSize + 'px' }"

     (3)其中 activeColor/fontSize 是 data 属性

3 示例

VUE学习(五)-Class 与 Style 绑定

   <style>
        .classA {
            color: red;
        }
        .classB {
            background: blue;
        }
        .classC {
            font-size: 20px;
        }
   </style> 
   <div id="app">
        <h3>1. class 绑定: :class='xxx'</h3>
        <p><span :class="a">表达式是字符串: 'classA'</span></p>
        <p :class="{classA: isA, classB: isB}">表达式是对象: {classA:isA, classB: isB}</p>
        <p :class="['classA', 'classC']"> 表达式是数组: ['classA', 'classB']</p>

        <h3>2. style 绑定</h3>
        <p :style="{ color, fontSize}">style="{ color, fontSize}"</p>
        <p :style="{ color: activeColor, fontSize: fontSizeVal +'px' }">style="{ color: activeColor, fontSize: fontSize +'px' }"</p>
        
        <button @click="update">更新</button>
    </div>

    <script type="text/javascript" src="../plugins/js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                a:'classA',
                isA:true,
                isB:false,
                color:'red',
                fontSize: '20px',
                activeColor:'red',
                fontSizeVal: '20'
            },
            methods:{
                update () {
                    this.a = 'classC'
                    this.isA = false
                    this.isB = true
                    this.color = 'blue'
                    this.activeColor = 'blue'
                    this.fontSize = '30px'
                    this.fontSizeVal = '30'
                }
            }
        })
    </script>

    注:style="{ color, fontSize}"采用该种形式时,属性名称必须是CSS属性名称