VueJs之判断与循环

A:判断语句

1.v-if  / v-else  /  v-else-if

<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
  el: '#app'
})

2.PS: v-show 指令来根据条件展示元素(如:<h1 v-show="ok">Hello!</h1>  ok:true)

 

B:循环语句

1.循环使用 v-for 指令,需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名

2.key:value形式  则以 (value, key) in object 循环  ,再取值赋值

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

3.index : key :value       

 <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
 </li>

4.PS: v-for  也可以循环整数   

<li v-for="n in 10">
     {{ n }}
</li>

 

转载于:https://www.cnblogs.com/assistants/p/10302414.html