Vue - v-if directive for conditional rendering

0 votes
881 views
added Jun 26, 2018 in Vue by anonymous
edited Jul 13, 2018 by LC Marshal
<template v-if="Array.isArray($store.state.propertyData['events-timeline']) && $store.state.propertyData['events-timeline'].length > 0">
  <h3>Events</h3>
  <div class="widget-box no-border">
      <div class="timeline col-md-12">
        <ul class="entries">
          <li v-for="event in $store.state.propertyData['events-timeline']" :key="event.description">
            <span class="title">{{event.description}}</span>
            <span class="date">{{event.date}}</span>
          </li>
        </ul>
      </div>
     </div>
  </div>
</template>

5 Responses

0 votes
responded Jun 26, 2018 by anonymous
edited Jul 13, 2018 by LC Marshal
<template v-if="actionType==='buy'">
  <button class="btn btn-primary btn-block disabled nobuy">Reserve Unit Now</button>
  <div class="or-splitter">
    <span>or</span>
  </div>
</template>
0 votes
responded Jun 26, 2018 by anonymous
edited Jul 13, 2018 by LC Marshal
<template v-else-if="actionType==='fund'">
  <button class="btn btn-primary btn-block"   @click="$router.push('fund/1')">Fund</button>
  <div class="or-splitter" v-if="actionType==='fund'">
    <span>or</span>
  </div>
</template>
0 votes
responded Jun 26, 2018 by anonymous
edited Jul 13, 2018 by LC Marshal
<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>
0 votes
responded Jun 26, 2018 by anonymous
edited Jul 13, 2018 by LC Marshal
//The v-else-if, as the name suggests, serves as an “else if block” for v-if. It can also be chained multiple times:

<div v-if="type === 'Messi'">
  Messi
</div>
<div v-else-if="type === 'Ronaldo'">
  Ronaldo
</div>
<div v-else-if="type === 'Adam'">
  Adam
</div>
<div v-else>
  Neither Messi, Ronaldo nor Adam
</div>
0 votes
responded Aug 2, 2018 by LC Marshal Captain (25,790 points)
<!--if discount secured is bigger than 0, show this div-->
<div class="extra-row border-bottom-1" v-if="propertyData['discount_secured'] > 0">
  <div class="col-xs-6 extra-left">Discount Secured</div>
  <div class="col-xs-6 rangeval"> {{ propertyData['discount_secured'] }} %</div>
</div>

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...