Имя динамического класса

Как создать динамическое имя класса?

  li v-for='obj in objs'
    | {{ obj.id }} {{ obj.title }}
    div id="obj-{{ obj.id }} " style="float:right; color:red;"

Этот образец не работает! Мне нужно это имя класса, чтобы позже обновить div!!!


vue.js slim-lang
person NeverBe    schedule 31.10.2016    source источник

Ответы (6)


arrow_upward
86
arrow_downward

Это помогло мне.

    div :class="['obj-' + obj.id]" style="float:right; color:red;"
person NeverBe    schedule 31.10.2016
comment
Работал. Замечательно! это должно быть указано в документации. - person Yuda Prawira; 07.08.2018
comment
Работает отлично. С ES6: :class="[`obj-${obj.id}`]" - person Fabian von Ellerts; 21.05.2019

arrow_upward
49
arrow_downward

Я не знаком с slim-lang, но это то, что вам нужно, чтобы попасть внутрь шаблона Vue:

<div v-bind:class="['static-class', { 'active-class' : isActive }]">...</div>

В приведенном выше случае, если isActive оценивается как true, будет применен «активный класс». И «статический класс» всегда применяется в представлении. Это называется синтаксисом массива.

Ссылка: https://vuejs.org/guide/class-and-style.html#Array-Syntax

Вам нужно убедиться, что процессор slim-lang выдает указанный выше HTML.

Теперь, переходя к настройке id, вы не можете выполнять привязки атрибутов, используя синтаксис усов ({{...}}). Вам нужно связать свой id следующим образом:

<div v-bind:id="dynamicId"></div>

Ссылка: https://vuejs.org/guide/syntax.html#Attributes

person Mani    schedule 31.10.2016
comment
Я не уверен, что понимаю ваши примеры, мне не нужно использовать условные классы, мне нужны статические. - person NeverBe; 31.10.2016

arrow_upward
18
arrow_downward

Для нескольких классов:

:class="{'form-control':true,['box_'+index]:true}"
person Abhinandan    schedule 05.06.2018

arrow_upward
1
arrow_downward

Ваш код действительно работает, я думаю, проблема в настройке данных vue. Я тоже люблю слим.

div#posting
  li v-for='obj in objs'
    | {{ obj.id }} {{ obj.title }}
    div id="obj-{{ obj.id }}" class="obj-{{ obj.id }} " style="float:right; color:red;"

javascript:
  var posting;
  posting = new Vue({
    el: '#posting',
    data: {
      objs:
        [
          {id: 1, title: 'xx'},
          {id: 2, title: 'yy'},
        ]
    }
  });

веб-изображение

person seaify - Freelancer    schedule 01.11.2016

arrow_upward
0
arrow_downward 

<li v-for="color in colors" :class="[color.style]" class="list">{{color.name}}</li>
</ul>

https://codepen.io/mike-oxhuge/pen/mdOMybP

   data: {
  colors: [
    { id: "1", name: "blue text", style: "blue" },
    { id: "2", name: "red text", style: "red" },
    { id: "3", name: "green text", style: "green" }
  ],
},

Вот и у меня получилось. Динамическое имя для класса.

person Mike Oxhuge    schedule 19.02.2021

arrow_upward
0
arrow_downward

В vue динамическая классификация может быть добавлена ​​несколькими способами.

  • Множество
 :class="['prise', index === 0 ? 'first' : '', index === 1 ? 'second' : '']"

здесь,приз будет добавлен к классу что бы ни случилось,но только когда индекс будет равен 0,тогда первый будет добавлен к названию класса,а индекс равен 1,тогда второй будет добавлен к класс.

  • Объект
  :class= "{ 'ultra-prise','first":index===0,'second':index===1}"

здесь, в случае объекта, ключ будет добавлен к классу только тогда, когда значение истинно.

поэтому для этого вопроса просто мы можем написать что-то вроде этого.

   :class="[`obj-${obj.id}`]"
person Abdulla Ababakre    schedule 14.04.2021