Javaweb之Vue指令案例的详细解析

2.3.5 案例

  • 需求:

  • Javaweb之Vue指令案例的详细解析_第1张图片

    如上图所示,我们提供好了数据模型,users是数组集合,提供了多个用户信息。然后我们需要将数据以表格的形式,展示到页面上,其中,性别需要转换成中文男女,等级需要将分数数值转换成对应的等级。
  • 分析:

    首先我们肯定需要遍历数组的,所以需要使用v-for标签;然后我们每一条数据对应一行,所以v-for需要添加在tr标签上;其次我们需要将编号,所以需要使用索引的遍历语法;然后我们要将数据展示到表格的单元格中,所以我们需要使用{{}}插值表达式;最后,我们需要转换内容,所以我们需要使用v-if指令,进行条件判断和内容的转换

  • 步骤:

    • 使用v-for的带索引方式添加到表格的标签上

    • 使用{{}}插值表达式展示内容到单元格

    • 使用索引+1来作为编号

    • 使用v-if来判断,改变性别和等级这2列的值

  • 代码实现:

    首先创建名为17. Vue-指令-案例.html的文件,提前准备如下代码:

    
    
    
        
        
        
        Vue-指令-案例
        
    
    
        
        
                                                                                                                                                   
    编号姓名年龄性别成绩等级
    ​    
    ​ ​

    然后在上添加v-for进行遍历,以及通过插值表达式{{}}和v-if指令来填充内容和改变内容,其代码如下:

     
         {{index + 1}}
         {{user.name}}
         {{user.age}}
         
             
             
         
         {{user.score}}
         
             优秀
             及格
             不及格
         
    

其完整代码如下:




    
    
    
    Vue-指令-案例
    


    
    
                                                                                                                                        ​                                                                                                                                
编号姓名年龄性别成绩等级
{{index + 1}}{{user.name}}{{user.age}}                                                        {{user.score}}                    优秀                    及格                    不及格                
​    
​ ​

你可能感兴趣的:(Web,vue.js,前端,javascript,开发语言,ecmascript,前端框架,css)