Вю - v-связать динамический класс связывания

В настоящее время многие веб-сайты динамический класс коммутации надежды, заменить стили CSS. Здесь мы используем V-привязки Vue Binding класс

Привязка синтаксиса объекта (общий)

и значение истинного красного размера отображается красным и размер класса, ложь не отображается. Вот два способа написания:

< Стиль > 
    .red { 
        цвет : красный ; 
    } 
    .Size { 
        размер шрифта : 20px ; 
    } 
</ Стиль > 

< DIV ID = "приложение" > 
    < уль > 
        <! - 写法一-> 
        < литий : класс = "{красный: isColor, размер: isSize}" > {{список}} </ литий > 
        <! - 写法二, v-связывать绑定函数必须加上() -> 
        < литий : класс = "ListData ()" ></ Li > 
    </ уль > 
    <! - Нажмите на это, красный правда становится ложным, ложное становится наоборот красный истинной -> 
    < Кнопка @ Выберите = "Reverse" > Invert Selection </ Кнопка > 
</ DIV > 

< Script > 
    Уст App = новый новый Вью ({ 
        EL: " #app " , 
        Data: { 
            Список: " Вью " , 
            isColor: истина , 
            isSize: истина 
        },
        методы: { 
            Реверс: функция () {
                 вернуть  это .isColor =  ! это .isColor; 
            }, 
            // 写法二
            ListData: функция () {
                 возвращение {красный: это .isColor, размер: это .isSize}; 
            } 
        } 
    }) 
</ Скрипт >

Примечание: v-привязка: Команда класса может сосуществовать с обычной характеристикой класса, соответствующий синтаксический сахар: «: класс» , равная у-BIND: класс

Binding синтаксис массива

Синтаксис массива обычно не используются, главным образом потому, что она не является гибкой:

< DIV ID = "приложение" > 
    < уль > 
        <! - 这里绑定данные的变量-> 
        < литий : класс = "[ACLI, BclI]" > {{список}} </ литий > 
    </ уль > 
</ DIV > 

Уст приложение = новый Вью ({ 
        эш: "# приложение", 
        данные: { 
            список: "Вью", 
            ACLI: "ааа", 
            BclI: "БББ", 
        }, 
})    

Более строка привязки синтаксис массива , чтобы связать практически, не используется

< DIV ID = "демо" > 
　　< диапазон : класс = "CLASSA" > </ диапазон > 
</ DIV > 

пусть Vm = новый Вью ({ 
　　　　эш: "# демо", 
　　　　данные: { 
　　　　　　CLASSA: "строка" 
　　　　} 
})

Комплексная формулировка

< DIV ID = "демо" > 
　　< диапазон : класс = "[один, { 'CLASSA': ClassA 'ClassB': ClassB}]" > </ промежуток > 
</ DIV > 

вар Vm = новый Vue ({ 
　　　　эш: "#demo", 
　　　　данные: { 
　　　　　　один: "строка", 
　　　　　　ClassA: правда, 
　　　　　　ClassB: ложь 
　　　　} 
})