Javascript и Vue для начинающих здесь. Пробуем примеры, чтобы изучить основные понятия.
<template>
/*<p v-bind:class = "['bold', 'italic', isValid ? 'valid' : 'invalid']">*/
<p v-bind:class = "classArray">
Hello, {{name[0]}} {{name[1]}}
</p>
</template>
<script>
export default {
data() {
return {
isValid: true,
name: ['John','Doe'],
classArray: ['bold', 'italic', isValid ? 'valid' : 'invalid']
}
}
}
</script>
<style>
.bold { font-weight: bolder }
.italic { font-style: italic }
.valid { color: forestgreen }
.invalid { color: crimson }
</style>
Приведенный выше код выдает следующую ошибку:
ОШИБКА [эслинт] /js/vue3/src/App.vue 16:38 ошибка isValid не определена no-undef
✖ 1 проблема (1 ошибка, 0 предупреждений)
Как мне получить доступ к «isValid» внутри classArray?
🤔 А знаете ли вы, что...
JavaScript имеет множество библиотек и фреймворков, таких как jQuery, Angular, и Vue.js.
Определите classArray как геттер, который проверяет текущее значение isValid объекта.
export default {
data() {
return {
isValid: true,
name: ['John','Doe'],
get classArray() { return ['bold', 'italic', this.isValid ? 'valid' : 'invalid']; }
}
}
}
Вы можете использовать вычисляемое свойство для classArray, чтобы оно могло правильно ссылаться на isValid из данных компонента. Сделайте снимок
<template>
<p v-bind:class = "classArray">
Hello, {{ name[0] }} {{ name[1] }}
</p>
</template>
<script>
export default {
data() {
return {
isValid: true,
name: ['John', 'Doe']
}
},
computed: {
classArray() {
return ['bold', 'italic', this.isValid ? 'valid' : 'invalid'];
}
}
}
</script>
<style>
.bold { font-weight: bolder }
.italic { font-style: italic }
.valid { color: forestgreen }
.invalid { color: crimson }
</style>