動態列如何分隔樣式

我正在嘗試創建動態列，每當我有 2、3、4 列時，這都不是問題，因為這些是具有相同樣式的卡片。我希望每行能夠有 1 個專案，其 css 與卡片完全不同。實作這一目標的最佳方法是什么？

這是我迄今為止嘗試過的

<script setup>
import { ref } from 'vue'

const list = ref([
  { title: 'hello', content: 'world'},
  { title: 'hello', content: 'world'},
  { title: 'hello', content: 'world'},
  { title: 'hello', content: 'world'},
  { title: 'hello', content: 'world'},
])

const itemsPerRow = ref('25%')

function toggle(e) {
  itemsPerRow.value = `${e.target.value}%`
}
</script>

<template>
  <select @change="toggle($event)">
    <option value="25">4</option>
    <option value="33">3</option>
    <option value="50">2</option>
    <option value="100">1</option>

  </select>
  <div >
    <div >
      
    
    <div v-for="item in list" >
      {{ item.title }}
    </div>
</div>
  </div>
</template>


<style>
  .items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .item {
    flex-basis: v-bind(itemsPerRow);
    border: 1px solid black;
    box-sizing: border-box;
  }
</style>

uj5u.com熱心網友回復：

作業示例

這只是您可以根據列數有條件地呈現資料的眾多方法之一。

根據Vue 檔案，您可以將v-for放在模板元素上。并在里面使用v-if和v-else渲染不同的標記。在此示例中，我們檢查 itemsPerRow == '100%'，這表示正在顯示一列，并應用不同的 Bootstrap 類。

 <template v-for="item in list"> 
    <div v-if="itemsPerRow == '100%'" >
      <img  src="https://loremflickr.com/320/50/dog">
     <div >
      <h5 >{{item.title}}</h5>
      {{item.content}}
      </div>
    </div>
    <div v-else >
    {{ item.title }}
   </div>
  </template>

片段

該片段不同于原始代碼，因為它是一個應用程式而不是一個組件。從下拉串列中選擇 1 列將顯示與多列不同的布局。

const {
  createApp
} = Vue



createApp({
  methods: {},
  watch: {
    itemsPerRow: function(value) {
      document.querySelector(":root").style
        .setProperty("--itemsPerRow", value);
    }
  },
  data() {
    return {
      itemsPerRow: "25%",
      list: []
    }
  },
  mounted() {
    for (let i = 1; i <= 100; i  ) {
      this.list.push({
        title: "Title "   i,
        content: "The quick brown fox jumped over the lazy dog"
      });
    }
  }
}).mount('#app')

:root {
  --itemPerRow: 25%;
}

.container {
  margin: 2rem;
}

.items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.item {
  flex-basis: var(--itemsPerRow);
  border: 1px solid black;
  box-sizing: border-box;
  padding: 0.25rem;
}

<div id="app">
  <div class="container">

    <select v-model="itemsPerRow" class="form-control mb-2">
      <option value="25%">4 columns</option>
      <option value="33%">3 columns</option>
      <option value="50%">2 columns</option>
      <option value="100%">1 column</option>
    </select>

    <div class="items">
      <template v-for="item in list"> 
        <div v-if="itemsPerRow == '100%'" class="item card mb-2">
          <img class="card-image-top" src="https://loremflickr.com/320/50/dog">
         <div class="card-body">
          <h5 class="card-title">{{item.title}}</h5>
          {{item.content}}
          </div>
        </div>
        <div v-else class="item alert alert-primary">
        {{ item.title }}
       </div>
      </template>
    </div>
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

uj5u.com熱心網友回復：

如果我理解正確，您可以使用一些事件（點擊演示）并設定樣式：

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const list = ref([
      { title: 'hello', content: 'world'},
      { title: 'hello', content: 'world'},
      { title: 'hello', content: 'world'},
      { title: 'hello', content: 'world'},
      { title: 'hello', content: 'world'},
    ])
    const itemsPerRow = ref('25%')
    function toggle(e) {
      itemsPerRow.value = `${e.target.value}%`
    }
    const index = ref(null)
    const setIndex = (i) => {
      index.value = i
    }
    const setStyle = (i) => {
      const selected = index.value === i ? itemsPerRow.value : `25%`
      return `flex-basis: ${selected}`
    }
    return {
      list, itemsPerRow, toggle, setIndex, index, setStyle
    };
  },
})
app.mount('#demo')

.items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.item {
  border: 1px solid black;
  box-sizing: border-box;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <select @change="toggle($event)">
    <option value="25">4</option>
    <option value="33">3</option>
    <option value="50">2</option>
    <option value="100">1</option>
  </select>
  <div class="container">
    <div class="items">
      <div v-for="(item, i) in list" class="item" :key="i" @click="setIndex(i)" :style="setStyle(i)">
        {{ item.title }}
      </div>
    </div>
  </div>
</div>

標籤：Vue.jsVuejs3

上一篇：姜戈幫助！帶有方法post的表單沒有使用djangourl標簽正確呼叫操作需要幫助理解為什么這不起作用？

下一篇：未定義的mixinsass