vue绑定样式-蒲公英云

vue绑定样式

灰太狼 2023-10-02 22:16 82阅读 0赞

3.1、绑定class

绑定class样式—字符串写法，适用于:样式的类名不确定，需要动态指定

<div class="basic" :class="mood" @click="changeMood"> {
  {message}}</div>

绑定class样式—数组写法,适用于:要绑定的样式个数不确定、名字也不确定

<div class="basic" :class="classArr" @click="changeMood"> {
  {message}}</div>
<script>
    new Vue({
        data: {
            classArr: ['lalala', 'hahaha', 'jiejiejie'],
        }
    })
</script>

绑定class样式—对象写法，适用于:要绑定的样式个数确定、名字也确定，但要动态决定用不用

<div class="basic" :class="classObj" @click="changeMood"> {
  {message}}</div>
<script>
    new Vue({
        data: {
            classObj: {
                flag1: false,
                flag2: false
            }
        }
    })
</script>

3.2、绑定style

绑定style样式—对象写法

<div class="basic" :style="styleObj">{
  {message}}</div>
<script>
    new Vue({
        data: {
            styleObj: {
                fontSize: '40px',
            }
        }
    })
</script>

绑定style样式—数组写法

<div class="basic" :style="styleArr">{
  {message}}</div>
<script>
    new Vue({
        data: {
            styleArr: [
                {
                    fontSize: '40px'
                },
                {
                    backgroundColor: 'skyblue'
                }
            ]
        }
    })
</script>