Vue页面的分支和循环

1.前置条件

script标签中写入

    export default {

        data () {
            return {
              ifshow:true,
              score:0,
              parr:[
                  {pid:1,name:'小明',age:18,sex:'男'},
                  {pid:2,name:'老王',age:68,sex:'男'},
              ]
            }
        }

 }

template 标签中写入

<div class='main'>

</div>

2. v-show 

在  class='main' 的div中写入

<div class="vs" v-show="ifshow">
            v-show 显示:
            元素始终被编译并保留，只是简单地基于 CSS 切换。也就是只隐藏不消失。
            v-if 是真实的条件渲染，条件不对是真没有出现在页面上。
        </div>

开始是显示的，把 ifshow 改为 false 就会显示不出来了。

3. v-if ：分支

在  class='main' 的div中写入

<div>
            请输入分数:<input type="number" v-model.lazy="score"/>
        </div>
        <div v-if="score <0 || score >100">
            分数错误
        </div>
        <div v-else-if="score >= 85">
            优秀
        </div>
        <div v-else-if="score >= 70">
            良好
        </div>
        <div v-else-if="score >= 60">
            合格
        </div>
        <div v-else>
            不合格
        </div>

输入分数会显示对应的等级：比如输入 90 就是优秀。

4.v-for ：循环

在  class='main' 的div中写入

<table id="mytab" border="1" cellpadding="0" cellspacing="0">
            <tr>
                <td>编号</td><td>姓名</td><td>年龄</td><td>性别</td><td>操作</td>
            </tr>
            <tr v-for="(po,index) in parr" :key="po.pid">
                <td>{{ po.pid }}</td>
                <td>{{ po.name }}</td>
                <td>{{ po.age }}</td>
                <td>{{ po.sex }}</td>
                <td><button @click="delPerson(po,index)">删除</button></td>
            </tr>
        </table>

显示效果如下：

 <tr v-for="(po,index) in parr" :key="po.pid">中：

 index 表示下标 

po表示每次循环的对象

:key 用于优化vue渲染的必须要填，一般对应主键

在 methods 中加入：

delPerson(obj,index){
                // alert(obj.name);
                this.parr.splice(index,1);
            }

效果是：点击删除按钮会删除当前的行。