v-if

条件判断语句
在元素 和 template 中使用 v-if 指令：
可以用于根据表达式的值来确定是否插入元素

同样可以使用 v-show

  1. <p v-if ="panduan">你好！</p>    可见
  2. <template v-if="panduan2">        不可见
  3.     <p>我不好</p>
  4. </template>
  6. data(){
  7. return{
  8.     panduan:true 
  9.     panduan2:false
  10. }
  11. }

v-else

可以用 v-else 指令给 v-if 添加一个 “else” 块： 

  1. <div v-if="Math.random() > 0.5"> 
  2.     Sorry 
  3. </div>
  4. <div v-else> 
  5.     Not sorry 
  6. </div>

v-else-if

同上，与v-if v-else 三者链式使用

循环语句：

v-for

循环使用 v-for 指令。迭代整数，数组，对象
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名
移动端，使用vant 和v-for例子

  1. <van-cell-group  v-model="peopleList">
  2.       <van-cell clickable to="/about" v-for="item in peopleList" :key="item.id">
  3.           <template>
  4.               <img src="../assets/peoplelist.png" :style="{verticalAlign: 'middle',float:'left'}">
  5.                <div class="people-name" >
  6.                    <span>{{item.name}}</span>
  7.                </div>
  8.                 <div class="people-talk">
  9.                    <span>{{item.note}}</span>
  10.                    <span :style="{position:'absolute',right:'0'}">{{item.time}}</span>
  11.                </div>
  12.           </template>
  13.       </van-cell>
  14. </van-cell-group>

v-for 迭代对象

  1. <ul>
  2.   <li v-for="value in object">
  3.   {{value}}
  4. </li>
  5. </ul>
  7. 第二个参数为键名
  8. <ul>
  9.   <li v-for="(value, key) in object">
  10.     {{ key }} : {{ value }} 
  11.   </li>
  12. </ul>
  14. 第三个参数为索引
  15. <div id="app">
  16.   <ul>
  17.     <li v-for="(value, key, index) in object"> 
  18.         {{ index }}. {{ key }} : {{ value }} 
  19.     </li>
  20.   </ul>
  21. </div>