В этом руководстве вы узнаете, как условно включить / отключить атрибуты HTML в компонентах Vue.js.
В Vue.js вы можете включить или отключить кнопку HTML или поле формы, сделать их обязательными или необязательными, используя несколько способов.
Использование вычисляемого свойства
Я описал как условно отключить поле ввода с помощью вычисляемого свойства. Вот пример.
<div id="app">
<h2>Please, verify your email address:</h2>
<input type="text" id="email" name="name" v-model="email" :disabled="validated ? '' : disabled" /><br><br>
<h4 v-if="validated">
Thank you for verifying your email address
</h4>
</div>
Мы проверяем HTML-атрибут disabled
на вычисленное свойство validated()
.
Если validated
равно true
, поле ввода станет disabled
.
Использование объекта данных
Мы можем сравнивать атрибуты HTML со значениями объекта data ().
<div id="app">
<h2>Please, verify your email address:</h2>
<input type="text" id="email" name="name" v-model="email" :disabled="!emailEnabled" /><br><br>
<h4 v-if="validated">
Thank you for verifying your email address
</h4>
</div>
emailEnabled
установлен в false
, следовательно, поле электронной почты disabled
.
new Vue({
el: "#app",
data: {
email: null,
correctEmail: '[email protected]',
emailEnabled: false
},
methods: {
},
computed: {
validated() {
if (this.email === this.correctEmail) {
return true
}
},
}
})
Таким же образом мы можем включить / отключить другие атрибуты HTML, например required
.
<input type="text" id="email" name="name" v-model="email" :required="emailRequired" />
Если вы найдете этот пост полезным, дайте мне знать в комментариях ниже.
Ура,
Ренат Галямов
Хотите поделиться этим с друзьями?
👉 renatello.com/vue-js-html-attributes
PS: Обязательно ознакомьтесь с другими руководствами по Vue.js, например 5 лучших CSS-фреймворков для вашего проекта Vue.js (2019), Как программно перемещаться по маршрутизатору в Vue.js.
Первоначально опубликовано на https://renatello.com ( Условное включение / отключение атрибутов HTML в Vue.js ) 22 июля 2019 г.