在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 怎么循環(huán)數(shù)據(jù)以不同樣式展示？

怎么循環(huán)數(shù)據(jù)以不同樣式展示？

我發(fā)請求回來的數(shù)據(jù)要以不同的樣式展示該怎么做？

clipboard.png
劃紅框的分別是兩條數(shù)據(jù)
我試了好幾種方法都不行，請大神給指點(diǎn)指點(diǎn)

回答
編輯回答
貓小柒

emmmm

靠左靠右兩個樣式，循環(huán)的時候 i % 2 === 0 根據(jù)奇偶使用不同 class 不就好了

2018年1月5日 04:11
編輯回答
熟稔

根據(jù)需求，可以根據(jù)數(shù)據(jù)的奇偶性 添加不同的類，也可根據(jù)數(shù)據(jù)的屬性添加多種不同的類

<!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: {
                //這里我把數(shù)據(jù)的索引傳過來，根據(jù)索引添加不同的類，
                //在實(shí)際中可以根據(jù)需求 把值v 傳過來，根據(jù)v的值添加不同的樣式class
                addDifClass(k){
                     if(k%2==0){
                         return {even:true}
                     }else{
                         return {odd:true}
                     }
                }
            },
            created() {
                // 模擬返回?cái)?shù)據(jù)
                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>

希望能幫到你，如果有幫助希望采納

2018年1月12日 01:44
編輯回答
耍太極

這個很基礎(chǔ)的 ，拼接字符串，在循環(huán)的時候根據(jù)索引渲染不同的字符串進(jìn)行展示就行。


  <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>

這樣很清晰了吧，里面的內(nèi)容可以換，也不一定是非要1，2這種寫死的，內(nèi)容都可以換

2017年3月11日 20:04