Vue learning Road Part 11: set class style for page elements

1. class is an attribute of the page element. According to the content in the previous chapter 5, the operation attribute needs to be specified by v-bind (or simply:).

2. Let's start with a simple page style:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue style</title>
    <script type="text/javascript" src="js/vue.min.js"></script>

    <style type="text/css">
        .red{
            color: red;
        }
        .thin{
            font-weight: bold;
        }
        .size{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <p class="red size">This is Vue Example of style</p>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{}
        })
    </script>
</body>
</html>

It simply defines three style classes: red, thin and size. Next, we use v-bind to achieve the same effect.

< p v-bind: class = "redstr" > this is an example of Vue style</p>

In the p tag, we add the v-bind instruction. The style content in the class is the "redStr" value defined by the data attribute in the Vue object.

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                redStr:'red size'
            },
            methods:{}
        })
    </script>

The value of redStr in data is "red size", so the running effect is the same.

3. Take the following example:

<body>
    <div id="app">
        <p v-bind:class="['red',flag?'size':'']">This is Vue Example of style</p>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
　　　　　　　　　flag:true　
　　　　　　　},
            methods:{}
        })
    </script>
</body>

Here I feel that although v-bind instruction is used, it does not take data from data. It directly defines the style as a fixed string array, and takes the corresponding style through the contents of the array. One of its features is that it can read the ternary expression and control whether the style is displayed according to the ternary expression. Moreover, we can simplify the ternary expression and achieve the same effect in the way of object. The code is as follows:

< p v-bind: class = "['Red ', {' size ': Flag}]" > this is an example of Vue style</p>

4. The following example:

<body>
    <div id="app">
        <p v-bind:class="classObj">This is Vue Example of style</p>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                classObj:{'size':true,'red':true,'thin':true}
            },
            methods:{}
        })
    </script>
</body>

Here, data object data classObj is bound by attribute, and its value is an object. Whether to apply this style is determined by true or false. This code is concise and flexible.

5. The above methods can be used to define the class style. Which one can be used according to the specific demand scenario.

Make a little progress every day!

Keywords: Javascript Vue Attribute IE

Added by leeroy1 on Thu, 05 Dec 2019 06:53:07 +0200

Programming VIP

Vue learning Road Part 11: set class style for page elements

Popular Keywords