Vue动态绑定样式

Vue动态绑定样式——class

1.对象语法
{ className：数据模型 }

 <div :class="{myclass1:show}" id="ss"></div>
    <script>
        let vm = new Vue({
            el: "#ss",
            data: {
                show: true,
            },
        })
    </script>

2.数组语法
[ 数据模型1，数据模型2 ]

  <div :class="[myclass1,myclass2]" id="ss"></div>
    <script>
        let vm = new Vue({
            el: "#ss",
            data: {
                myclass1: 'o1',
                myclass2: 'o2',
            },
        })
    </script>

3.表达式

  <div :class="[my<7?myclass1:myclass2]" id="ss"></div>
    <script>
        let vm = new Vue({
            el: "#ss",
            data: {
                myclass1: 'o1',
                myclass2: 'o2',
                my: 5,
            },
        })
    </script>

Vue动态绑定样式——style

1对象语法：

<div :style="{color:color,fontSize:size+'px'}"  id="ss">你好中国</div>
<script>
    let vm = new Vue({
        el: "#ss",
        data: {
            color:'red',
            size:30,
        },
    })
</script>

直接绑定到一个样式对象通常更好，这会让模板更清晰：

  <div :style="styleObject"  id="ss">你好中国</div>
    <script>
        let vm = new Vue({
            el: "#ss",
            data: {
                styleObject:{
                    color:'red',
                    fontSize:'30px',
                }
            },
        })
    </script>

2.数组语法：

<div :style="[css1,css2]" id="ss">你好中国</div>
<script>
    let vm = new Vue({
        el: "#ss",
        data: {
            css1: {
                fontSize: '48px',
                color: 'red',
            },
            css2: {
                width: '200px',
                height: '200px',
                background: 'green',
            }
        },
    })
</script>

3：表达式：

<div :style="!color?css1:css2" id="ss">你好中国</div>
    <script>
        let vm = new Vue({
            el: "#ss",
            data: {
                css1: {
                    fontSize: '48px',
                    color: 'red',
                },
                css2: {
                    width: '200px',
                    height: '200px',
                    background: 'green',
                },
                color: false,
            },
        })
    </script>