Как v-if внутри одного тэга в template vue?

Question

[Вячеслав]

привет! :)
есть вот такой шаблон:

<template>
...
	<a :href="`/${param._id}`" v-if="!param.new" style="opacity:.5">
	<a :href="`/${param._id}`" v-if="param.new">
...
</template>

Мне нужно добавить свойство style если отсутствует значение param.new

судя по документации, v-if можно задать только подобным способом
а нет ли какого-нибудь более традиционного, в пределах 1 тэга?
что-то вроде
{{if param.new}}style=""{{/if}}
не хочется как-то дублировать тэги подобным образом

Answer 1

[Сергей]

Назначать классы, а не стили:
:class="{'class_opacity': isClass}";
Ну или в style заносить свойства из data.

Answer 2

[Антон Антон]

У vue очень хорошая документация на русском https://ru.vuejs.org/v2/guide/class-and-style.html

Comments

[Вячеслав]

да ладно? серьёзно?
а вы читали то, что я написал выше? :)
там написано "судя по документации..."

[alvvi]

Вячеслав, а вы переходили по ссылке, которую вам дали?)
Там как раз описано то что вы хотите и как это сделать.

[Вячеслав]

Илья Ростопка, конечно же перешел :) там написано про css классы. только причем тут v-if? я вроде про него спросил.
а спросил я про v-if потому, что кусочек кода, что я привел - лишь часть, и у меня ниже буду еще условия, зависимые от param.new и они будут разные. в одном месте это if-param-new style, в другом это if-param-new-green в третьем еще какой-нибудь и т.д.
предлагаете мне собирать предварительно массив этих параметров и потом рассовывать их по местам? мдэ)
мне нужно знать есть ли возможно использовать инлайново v-if, не более. Если такая возможность в vue отсутствует, то придется делать это через дублирование шаблонов template v-if new / template v-else
Если же вы все же считаете что я не прав и можно решить данный вопрос пройдя по ссылке, то прошу тыкнуть носом где имеено что я должен почернуть из нее
спасибо)

[alvvi]

Вячеслав, *тыкает носом*
Биндить можно и инлайн стили!
v-if же это совсем другая история. v-if это про перерендер, а зачем вам перерендер если меняется только аттрибут у элемента? Это абсолютно не рационально, и будет в итоге губить производительность.

[Evgeny Kulakov]

Вячеслав, вам тут пытались сказать, что данное вами условие задачи решается немного по-другому. Или опишите полностью, что хотите.
Не проверял, но что-то типа такого можно попробовать:

<a :href="`/${param._id}`" :style="!param.new ? { opacity: 0.5} : false">

[Вячеслав]

Илья Ростопка, я с вами согласился бы, будь это одно место, от которого зависит param.new и будь одно везде бы class или style
но у меня ниже по шаблону зависимость в нескольких местах и параметры совершенно разные,
поэтому, видимо, в моем случае проще сделать как-то так:

<template v-for="chat in list">
	<li v-if="chat.new">
		...
	</li>
	<li v-else>
		...
	</li>
</template>

[Вячеслав]

Evgeny Kulakov, в том и дело что я пытаюсь донести в обратную, что мне требуется не то, что мне пытаются донести :) видимо я изначально не так выразился. Но ваш пример, скорее всего то, что и требовалось. пойду попробую

[alvvi]

я с вами согласился бы, будь это одно место, от которого зависит param.new и будь одно везде бы class или style
но у меня ниже по шаблону зависимость в нескольких местах и параметры совершенно разные,

Ну так разве я видел ваш шаблон?) Гадалок здесь нет, а вот то, что в вопросе, решается с помощью v-bind.

[Антон Антон]

будь это одно место, от которого зависит param.new и будь одно везде бы class или style

Вячеслав, а какая разница?