Блог

Главная - Вопросы по программированию - Пользовательский элемент цвета -строка css в зависимости от идентификатора группы, vue, html

Пользовательский элемент цвета -строка css в зависимости от идентификатора группы, vue, html

#php #html #css #sql #vue.js

#php #HTML #css — код #sql #vue.js

Вопрос:

Мне нужен пользовательский элемент color .row по id_parent. когда — нибудь . какое — то время .b Я использую vue

 <template>
   <div class="row-item" v-for="row in list" > {{row.name}}   {{row.id_parent}} </div>
<template>

<script>
    export default {
        data(){
           return{
            list:[
                        {name:"loem", id_parent: 1 }, 
                        {name:"loem", id_parent: 1 }, 
                        {name:"loem", id_parent: 3 }, 
                        {name:"loem", id_parent: 3 }, 
                        {name:"loem", id_parent: 4 }, 
                        {name:"loem", id_parent: 4 }, 
                 ]
             }
        }
</script>
<style>
.a{
    border-left: 2px solid #9c27b0;
}
.b{
    border-left: 2px solid #5c6bc0;
}
</style>

Я хотел бы получить такой результат: первый id_parent class .a и следующий .b , next .a …

         <div class="row-item a"> lorem 1 </div>
        <div class="row-item a"> lorem 1 </div>
        <div class="row-item b"> lorem 3 </div>
        <div class="row-item b"> lorem 3 </div>
        <div class="row-item a"> lorem 4 </div>
        <div class="row-item a"> lorem 4 </div>
        ...

Ответ №1:

вы можете сделать это

 <template>
   <div :class="'row-item ' getRowClass(row)" v-for="row in list" > {{row.name}}    {{row.id_parent}} </div> //Changes added
<template>

<script>
    export default {
        data(){
           return{
            list:[
                        {name:"loem", id_parent: 1, class: 'a' }, //Changes added
                        {name:"loem", id_parent: 1, class: 'b'  }, //Changes added
                 ]
             },
        },
     computed: {
      getRowClass() {
       return item => {
          if(item.id_parent === 1) return 'a';
          return 'b';
       }
      }
     }
 }
</script>
<style>
.a{
    border-left: 2px solid #9c27b0;
}
.b{
    border-left: 2px solid #5c6bc0;
}
</style>

Комментарии:

1. я бы хотел, чтобы по группе например: id_parent : 1 все id_parent 1 класс a, а следующая группа id_parent: 2 класс .b родительский идентификатор будет увеличиваться в группах. это пришло из axio

2. Пожалуйста, проверьте мой обновленный ответ… Я добавил вычисляемое свойство для его достижения

3. если вы видите parent_id, это будет приращение, что будет дальше, когда parent_id будет 3, 4, 5, 6? мне нужен next .a next .b по группе parent_id . 1 = a, 2 = b: 3:a, 4:b по строкам группы parent_id

4. Затем вы можете определить объект сопоставления для каждого из идентификаторов или лучше получить его в ответе