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 标签中写入

2. v-show 

在  class='main' 的div中写入

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

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

3. v-if ：分支

在  class='main' 的div中写入

            请输入分数:
        

        

            分数错误
        

        

            优秀
        

        

            良好
        

        

            合格
        

        

            不合格
        

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

4.v-for ：循环

在  class='main' 的div中写入

            
                
            
            
                
                
                
                
                
            
        

编号	姓名	年龄	性别	操作
{{ po.pid }}	{{ po.name }}	{{ po.age }}	{{ po.sex }}	删除

显示效果如下：

 中：

 index 表示下标 

po表示每次循环的对象

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

在 methods 中加入：

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

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