How to circulate the data and display it in different styles?

what should I do when I send back the requested data in a different style?

clipboard.png
the red box is marked by two pieces of data
I have tried several ways, please give me some advice

Vue.js javascript css
Mar.14,2021

emmmm

use two styles from left to right. When looping, I% 2 = 0 use class according to parity

.

according to the requirements, you can add different classes according to the parity of the data, or you can add a variety of different classes according to the attributes of the data 

<!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">
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
    <title>Document</title>
    <style>
       li.odd{
           background-color: -sharpaaa;
       }
       li.even{
           background-color: coral;
       }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(v,k) in lists" :key="k" :class="addDifClass(k)">
                <div>{{v.time}}</div>
                <h2>{{v.title}}</h2>
                <div>{{v.content}}</div>
            </li>
        </ul>
    </div>
    <script async>
        var app = new Vue({
            el: '-sharpapp',
            data: {
                message: 'Hello Vue!',
                lists:[],
            },
            methods: {
                //
                // v vclass
                addDifClass(k){
                     if(k%2==0){
                         return {even:true}
                     }else{
                         return {odd:true}
                     }
                }
            },
            created() {
                // 
                const mockdata = [
                    { time: '2018-5', title: 'title', content: 'content111' },
                    { time: '2018-6', title: 'title2', content: 'content111' },
                    { time: '2018-6', title: 'title2', content: 'content111' },
                    { time: '2018-6', title: 'title2', content: 'content111' },
                    { time: '2018-6', title: 'title2', content: 'content111' },
                ]
                this.lists=mockdata;
            }
        })
    </script>
</body>

</html>

I hope I can help you. If there is any help, I hope to adopt

.

this is very basic, concatenate strings and render different strings according to the index during the loop. 

</b>
  </li>

this is very clear. The content can be changed, and it doesn't have to be written to death like 1p2, and the content can all be changed

.

Previous: For in problem in javascipt

Next: How to understand that attributes of the same name will not appear in Symbol?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b36575-2bffa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b36575-2bffa.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?