Vue - v-bind directive for data binding

Question

<!--href attributes-->
<div class="col-md-6">
    <a v-bind:href="propertyData.documents"><i class="icon-download ion-ios-download-outline"></i> Surveyor's Report</a>
 
<!--images-->
<a v-bind:href="propertyData.images">
<img v-bind:src="propertyData.images" width="144" height="96"></a>
</div>

 

Answer 1

<!--use a v-bind for HTML attributes, simply because mustaches can't be use.-->
<div v-bind:id="dynamicId"></div>

 

Answer 2

<!--v-bind works for boolean attributes too-->
<button v-bind:disabled="isButtonDisabled">Button</button>
<!--'dissabled' attribute will not include in the <button> if isButtonDisabled has null, undefined, or false value-->

 

Answer 3

<!--fotorama-->
<div class="fotorama" data-nav="thumbs">
    <a v-for="img in images" :key="img" v-bind:href="img"><img :src="img" width="144" height="96"></a>
</div>