Блог

Как условно привязать к атрибутам в vue?

директива v-bind:

Что-то вроде этого приведено ниже:

 <img :src=" status = true ? 'open.svg' : 'close.svg'">
  

В angular это возможно. Я просто хотел узнать, возможно ли это в vue.

Или есть способ написать код javascript, подобный приведенному выше, в самом шаблоне (троичные операции)?

Вы можете сделать это:

 <img :src="status ? 'open.svg' : 'close.svg'" >
  

Или установить его как вычисляемое свойство:

 <img :src="imgSrc" >
  

 computed:{
  imgSrc(){
    return (this.status) ? 'open.svg' : 'close.svg'
  }
}
  

просто попробуйте это

 <img :src="status ? 'open.svg' : 'close.svg'">
  

в вашем коде status = true есть оператор присваивания, вы должны использовать оператор сравнения, подобный этому status == true

Вы можете использовать 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>