Home > Web Front-end > CSS Tutorial > Related methods of class and style settings in vue

Related methods of class and style settings in vue

高洛峰
Release: 2017-02-18 14:50:06
Original
1519 people have browsed it

class&style style setting

class

html code

<p id="box">
    <strong>阿斯顿发</strong>
</p>
Copy after login

css code

.red {
    color: red;
}
.gray {
    background-color: gray;
}
Copy after login

js code

window.onload = function() {
    new Vue({
        el: '#box',
        data: {
            red: 'red',
            gray: 'gray'
        }
    });
}
Copy after login

How to write the style to take effect

  1. :class="[red, gray]" The data attribute in the vue parameter is called

    <strong :class="[red, gray]"></strong>
    Copy after login
  2. :class="{red : true, gray: true}"

    <strong :class="{red: true, gray: true}"></strong>
    Copy after login

    The second method can also call the data attribute of the vue parameter. Remember, everything in Vue is data

    new Vue({
        el: '#box',
        data: {
           red: 'red',
           gray: 'gray',
           a: true,
           b: false
     }   
    });
    Copy after login
    <strong :class="{red: a, gray: b}"></strong>
    Copy after login
  3. :class="json", a simplified version of the second method, the official version

    new Vue({
        el: '#box',
        data: {
            red: 'red',
            gray: 'gray',
            json: {
                a: true,
                b: false
            }
        }
    });
    Copy after login
<strong :class="json"></strong>
Copy after login

style

is basically the same as class

  1. :style="{}"

<strong :style="{color: &#39;red&#39;, backgroundColor: &#39;gray&#39;}"></strong>
Copy after login
  1. :style="a"

    new Vue({
        el: '#box',
        data: {
            red: 'red',
            gray: 'gray',
            a: {
                color: 'red',
                backgroundColor: 'gray' //注意复合样式的书写规范
            }
        }
    });
    Copy after login
    <strong :style="a">阿斯顿发</strong>
    Copy after login
  2. :style="[a, b]", a, b correspond to the two json data in data

More class and style in vue For relevant setting methods and related articles, please pay attention to the PHP Chinese website!

Related labels:
vue
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template