#vue.js
#vue.js
Вопрос:
Я начал работать с шириной Vue.js , и я хотел бы знать, как я могу использовать условия ширины v-bind Это мой код (ошибка) :
<input
type="text"
class="form-control"
v-bind:class="{'is-invalid': step_1.project_url.error : 'is-valid'}"
v-model="step_1.project_url.field"
placeholder="Project url"
>
Комментарии:
1. В вашем коде есть синтаксические ошибки. Прочитайте сгенерированные сообщения об ошибках.
2. не могли бы вы помочь мне, пожалуйста, с помощью правильного синтаксиса 🙂
3. Я думаю, вы хотите
:class="{ 'is-invalid': step_1.project_url.error, 'is-valid': !step_1.project_url.error }"или, возможно:class="step_1.project_url.error ? 'is-invalid' : 'is-valid'". См. vuejs.org/v2/guide/class-and-style.htm
Ответ №1:
Правильный способ привязки будет
<input
type="text"
class="form-control"
v-bind:class="{'is-valid': (step_1.project_url.error !== '' amp;amp; step_1.project_url.error === true), 'is-invalid': (step_1.project_url.error !== '' amp;amp; step_1.project_url.error === false)}"
v-model="step_1.project_url.field"
placeholder="Project url"
>
Это будет работать в соответствии с вашими требованиями
Комментарии:
1. но здесь я получаю is-valid по умолчанию:( , я этого не хочу
2. каково начальное значение ‘step_1.project_url.error’?
3. ах, вот в чем причина … то есть вы имеете в виду, что это не логическое значение, а строка?
4. Хорошо, скажите мне одну вещь, на основании какого значения вы будете считать его допустимым?
5. допустимо, если его значение true
Ответ №2:
Здесь вы можете найти игровую площадку, с которой можно поиграть и посмотреть, как все работает: https://codesandbox.io/s/how-to-bind-styles-lue1g?file=/src/App.vue
Для получения дополнительной информации о том, как связать классы, вы можете проверить официальную документацию по стилю.
Для справки, вот тип строки, которого вы хотели достичь
<input
type="text"
:class="[valid === 'okay' ? 'bordered' : '', 'margined']"
v-model="valid"
/>
PS: :class является сокращением для v-bind:class !