#javascript #vue.js #vuejs2
#javascript #vue.js #vuejs2
Вопрос:
Как условно привязать к атрибутам в vue?
директива v-bind:
Что-то вроде этого приведено ниже:
<img :src=" status = true ? 'open.svg' : 'close.svg'">
В angular это возможно. Я просто хотел узнать, возможно ли это в vue.
Или есть способ написать код javascript, подобный приведенному выше, в самом шаблоне (троичные операции)?
Комментарии:
1. Вероятно, вам лучше иметь
computed
свойство вместо того, чтобы вставлять это выражение в шаблон.
Ответ №1:
Вы можете сделать это:
<img :src="status ? 'open.svg' : 'close.svg'" >
Или установить его как вычисляемое свойство:
<img :src="imgSrc" >
computed:{
imgSrc(){
return (this.status) ? 'open.svg' : 'close.svg'
}
}
Ответ №2:
просто попробуйте это
<img :src="status ? 'open.svg' : 'close.svg'">
в вашем коде status = true
есть оператор присваивания, вы должны использовать оператор сравнения, подобный этому status == true
Комментарии:
1. как предложил Маджед Бадави. вычисляемое свойство всегда будет хорошим вариантом
Ответ №3:
Вы можете использовать status == true
вместо status = true
.
Просто попробуйте это.
var vMain = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
status: true,
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<img :src='status == true ? "https://dummyimage.com/100x100/F00/fff" : "https://dummyimage.com/100x100/0F0/fff"'><br />
<button onclick='vMain.status = ! vMain.status;'>Switch Status</button>
</div>