怎么循环数据以不同样式展示?

ywqs
  • 31

我发请求回来的数据要以不同的样式展示该怎么做?

clipboard.png
划红框的分别是两条数据
我试了好几种方法都不行,请大神给指点指点

回复
阅读 1.4k
3 个回答

emmmm

靠左靠右两个样式,循环的时候 i % 2 === 0 根据奇偶使用不同 class 不就好了

根据需求,可以根据数据的奇偶性 添加不同的类,也可根据数据的属性添加多种不同的类

<!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: #aaa;
       }
       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: '#app',
            data: {
                message: 'Hello Vue!',
                lists:[],
            },
            methods: {
                //这里我把数据的索引传过来,根据索引添加不同的类,
                //在实际中可以根据需求 把值v 传过来,根据v的值添加不同的样式class
                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>

希望能帮到你,如果有帮助希望采纳

这个很基础的 ,拼接字符串,在循环的时候根据索引渲染不同的字符串进行展示就行。


  <li v-for="(v,k) in lists" :key="k" :class="addDifClass(k)">
      <a v-if="k==1"></a>
      <b v-if="k==2"></b>
  </li>

这样很清晰了吧,里面的内容可以换,也不一定是非要1,2这种写死的,内容都可以换

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏